How to pass a value to javascript?

Question

I'm working currently with Highcharts, I'm trying to create a function that use the data I write in a number field and present it as a new point in the chart once I click on add point, the add point showing in the link is to add point randomly to the chart.

http://jsfiddle.net/BlackLabel/2kw1b5o0/

 <div id="container"></div>
        <input type="number" id="add" name="new-point" value="">
        <button  id="add-point">Add point</button>
    <script>
var chart = Highcharts.chart('container', {
  series: [{
    data: [1, 2, 3, 4, 5]
  }]
});

function getValue(add) {

    ext = document.getElementById(id).value; //value of the text input
    alert(text);
    return false;

}

var x= document.getElementsByClassName("new-point").value; 
  document.getElementById('add-point').addEventListener('click', function() {
chart.series[0].addPoint();
});

Answer 1

There were a few issues with your code :

• Your getValue function needs the name of the field as a parameter and that parameter will be used in the document.getElementById() function to retrieve the fields you want to read data from
• You need to return the read value by using the return keyword
• Your chart expects a number. So, you need to parse read with Number.parseFloat()

Then, your event handler needs to call the getValue function and provided the name of the field :

function getValue(fieldName) {
    let value = document.getElementById(fieldName).value; //value of the text input
    return Number.parseFloat(value);
}

document.getElementById('add-point').addEventListener('click', function() {
  let value = getValue("add");

  chart.series[0].addPoint(value);
});

Updated JSFiddle

Answer 2

Just get the value of input as you are doing in getValue function. You can either return the value from that function like

function getValue() {

    var val= document.getElementById("add").value,

        return val;
}

and now you can use it like

document.getElementById('add-point').addEventListener('click', function() {
   var val  = getValue();
  chart.series[0].addPoint(val);
});

Or you can directly access the value in you click handler as

var el = document.getElementById("add")

document.getElementById('add-point').addEventListener('click', function() {

  chart.series[0].addPoint(el.value);
});

Here is your updated fiddle

Answer 3

document.getElementById(id).value returns a String value, and addPoint is expecting an Int, try this:

document.getElementById('add-point').addEventListener('click', function() {
  var point = document.getElementById('add').value;
  chart.series[0].addPoint(parseInt(point));
});

Answer 4

From HighChart's documentation, addPoint doesn't accept parameters of type String : https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Since the value of the input returns a String, you need to parse it to a float or a number :

function getValue(id) {
   let inputValue = document.getElementById(id).value;
   return parseFloat(inputValue);
}

Now you can call getValue in your EventListener :

chart.series[0].addPoint(getValue('add'));