用文本变量替换预定义文本的Javascript

在我的代码中有一个文本输入，允许用户键入自己的文本，然后将该文本转换为变量

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

既然变量包含文本，我需要更改代码中的两个部分，以使预定义的“文本”替换为变量中的文本。这两部分是“标题文本”必须更改为var标题，“yaxis文本”必须更改为var yaxis

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

---

变量不包含文本；它们只包含元素

如果要选择单个元素，最好使用

querySelector

而不是HTMLCollection方法之一：

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

然后，要获取它们的值，您需要使用。值：

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

---

然后，您可以继续使用

xAxisValue

和

yAxisValue

执行操作，如果我正确理解您需要使用前面为元素定义的变量，并提取值，只需将它们放在代码中，如下所示：

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

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

---

考虑使用

document.getElementById

将id添加到输入中以更快地访问它们：

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

---

为那些元素（如“change”或“keyup”事件）添加一个事件侦听器，并在函数内部将

title.text

等设置为这些元素的.text内容（您可以在函数内部使用

this

）。您能不能首先设置正确的文本，即

title:{text:title}，axisY:{title:yaxis}

？您可以添加html吗？