Question

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

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

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

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

Answer 1

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

如果您要选择单个元素，最好使用querySelector而不是其中一种HTMLCollection方法：

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

然后要获取值，您需要使用.value：

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

然后您可以继续xAxisValue和yAxisValue。

Answer 2

考虑在您的输入中添加ID，以便使用document.getElementById更快地访问它们：

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

请注意，函数document.getElementById和document.getElementsByName会返回DOM元素而不是文本。要访问文本输入元素的内容，请使用其权利value。

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

Answer 3

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

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

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

3 个答案: