Chartjs-HTML Input Form to a Javascript Variable

by

0👍

✅

Add onclick event to the button and define a function plotchart():

<button id="submitter" onclick="plotchart()">Submit</button>

Now, to read the input value in the function:

var data = document.getElementById("userInput").value;

Now, wrap all you chart plotting code inside plotchart() function.

0👍

You need to use the button event onclick, so every time you click it, you can then grab the input’s value using a reference to the element. Like the following snippet:

let someInput = document.getElementById('someInput')

function onButtonClick() {
    let someVariable = parseFloat(someInput.value);
    console.info(someVariable);
}
<input id="someInput" type="number" />
<button onclick="onButtonClick()">Click me</button>

After this, you may use someVariable for anything you need.

Notes:

  • Use a type="number" input for better UX (so users can’t input text or some other characters)
  • Consider resetting the input value after clicking the button.

Leave a comment