Как передать значение в 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

Из документации HighChart, addPoint не принимает параметры типа String: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Поскольку значение входного значения возвращает строку, вам необходимо проанализировать ее как число с плавающей запятой или число:

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

Теперь вы можете вызывать getValue в вашем EventListener:

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

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);
});

Здесь - ваша обновленная скрипка

Answer 3

document.getElementById(id).value возвращает строковое значение, а addPoint ожидает Int, попробуйте это:

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

Answer 4

Было несколько проблем с вашим кодом:

• Ваша функция getValue требует имя поля в качестве параметра, и этот параметр будет использоваться в функции document.getElementById() для извлеченияполя, из которых вы хотите прочитать данные
• Вам необходимо вернуть значение чтения, используя ключевое слово return 1009 *
• Ваша диаграмма ожидает число.Итак, вам нужно проанализировать чтение с 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);
});

Обновлен JSFiddle