1

I'm still relatively new to HTML and Javascript code so this could just be a minor stupid error.

Basically I'm trying to use chartjs to create a line chart and for one of those lines I want the user to be able to enter their own data, so I've been testing out a few methods but can't figure out why they won't work.

I was hoping to use document.getElementById to take the value of the first number input and then use it as a data value for the line chart, for example:

data: [addData(), 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

This is how the function to add the input value as data is called, then the function itself is:

function addData()  {

        var input = document.getElementById("testId").value;

     }

I've also tried to use return input; but the whole chart just disappears when I use either of those, however if I use the function below for addData() the chart still works fine and accepts 2 as the first data value:

function addData()  {

        var input = 2;
        return input;

     }

Here is the number input code:

Birth: <input  type="number" maxlength="4" id="testId" value="2"><br>

Any ideas why the entire chart disappears when I attempt to use a number input field for the data value?

EDIT: I've just solved this now thanks to Shai Aharoni for pointing out any possible errors, I just needed to rearrange the order of the input field to be before the script, just a silly error.

Mitchell Pearson
  • 11
  • 2

1 Answers1

0

It is hard to evaluate my solution when I do not have a complete example. So I'm not sure, but I hope the following helps you: It could be that you have a simple type error as the code

var input = document.getElementById("testId").value;

assigns a string value to the input variable. However, I think, you need an integer as input for your chart.

A solution could be:

var input = parseInt(document.getElementById("testId").value)

Although you have defined your input field as "number", javascript does not use this type to convert the value automatically. So, you have to convert the value by yourself.

Guybrush
  • 624
  • 7
  • 11
  • I think the error does relate to this, I've tried using your solution however it still doesn't work, as mentioned in a comment above I have noticed there is the following error in the console, Uncaught TypeError: Cannot read property 'value' of null at addData (index.html:224) at index.html:190 – Mitchell Pearson Mar 30 '17 at 09:48
  • Is it possible to give us a reduced example, e.g., remove all the stuff not belonging to that function and the input field. – Guybrush Mar 30 '17 at 11:40
  • It's ok I've edited the original post, I figured out what was wrong. Thanks for the help though your function helped too. – Mitchell Pearson Mar 30 '17 at 11:55
  • Do not solve it by reordering the script and the html elements. Use something like this: [http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the](http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the) – Guybrush Mar 30 '17 at 12:34