Javascript replacing a predefined text with a text variable

Question

In my code there is a text input that lets the user type in their own text, this text is then turned into a variable;

var title = document.getElementById("chartTitle");
var xaxis = document.getElementsByName('xaxis')[0];
var yaxis = document.getElementsByName('yaxis')[0];

Now that the variables contain the text, I need to change two parts within this code to make it so the predefined "text" is replaced with the text within the variable. The two parts are "title text" must changed to be the var title and the "yaxis text" must be changed to the var yaxis.

 var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: "title text"
    },
    axisY: {
      title: "yaxis text"
    },
    data: [{
         type: "column",
         dataPoints: []
    }]
});
chart.render();
}

add an event listener for those elements such as "change" or "keyup" events, and inside the function set the title.text etc. to the .textContent of those elements (you can use this inside the function). — George
– George, Commented Mar 26, 2018 at 3:43
Can you not simply set the correct text in the first place, ie title: { text: title }, axisY: { title: yaxis }? — Phil
– Phil, Commented Mar 26, 2018 at 3:44

Andrew Svietlichnyy · Accepted Answer · 2018-03-26 03:53:09Z

1

Consider adding id to your inputs to access them faster using document.getElementById:

<input type="text" name="yaxis" id="yaxis">

Note that the functions document.getElementById and document.getElementsByName return DOM elements rather than their text. To access the content of text input element use its proerty value.

var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: title.value
    },
    axisY: {
      title: yaxis.value
    },
    data: [{
         type: "column",
         dataPoints: []
    }]
});
chart.render();
}

answered Mar 26, 2018 at 3:53

Andrew Svietlichnyy

7711 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertainPerformance · Accepted Answer · 2018-03-26 03:47:30Z

0

The variables do not contain the text; they contain only the elements.

If you're going to select a single element, it's better to use querySelector instead of one of the HTMLCollection methods:

const xAxisElement = document.querySelector('[name=xaxis]');
const yAxisElement = document.querySelector('[name=yaxis]');

Then to get their values, you need to use .value:

const xAxisValue = xAxisElement.value;
const yAxisValue = yAxisElement.value;

Then you can proceed to do things with xAxisValue and yAxisValue.

answered Mar 26, 2018 at 3:47

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

josesuero · Accepted Answer · 2018-03-26 03:49:43Z

0

if i'm understanding correctly that you need to use the variables you defined earlier for the elements, and extract the value, just put them on your code like this:

var title = document.getElementById("chartTitle").value;
var xaxis = document.getElementsByName('xaxis')[0].value;
var yaxis = document.getElementsByName('yaxis')[0].value;

 var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: title
    },
    axisY: {
      title: yaxis
    },
    data: [{
         type: "column",
         dataPoints: []
    }]
});
chart.render();
}

answered Mar 26, 2018 at 3:49

josesuero

3,9602 gold badges15 silver badges22 bronze badges

Collectives™ on Stack Overflow

Javascript replacing a predefined text with a text variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related