如何将值传递给javascript？

Question

我目前正在使用Highcharts，我正在尝试使用我在数字字段中写入的数据创建一个函数，并在我点击添加点后将其显示为图表中的新点，链接中显示的添加点是将点随机添加到图表中。

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

您的代码存在一些问题：

• 您的getValue函数需要字段的名称作为参数，该参数将在document.getElementById()函数中用于检索您要从中读取数据的字段
• 您需要使用return关键字返回读取值
• 您的图表需要一个数字。因此，您需要使用Number.parseFloat（）解析读取

然后，您的事件处理程序需要调用getValue函数并提供字段的名称：

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

只需获得input的值，就像你在getValue函数中所做的那样。您可以从该函数返回值，如

function getValue() {

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

        return val;
}

现在你可以像使用它一样

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

或者您可以直接访问单击处理程序中的值

var el = document.getElementById("add")

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

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

Here是你的最新小提琴

Answer 3

document.getElementById(id).value返回一个String值，addPoint期待一个Int，试试这个：

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

Answer 4

从HighChart的文档中，addPoint不接受String类型的参数：https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

由于输入的值返回String，因此需要将其解析为float或数字：

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

现在，您可以在EventListener中调用getValue：

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