Question

[解决]

我正试图让它当我点击cuboidCalc时它将outputOne替换为cuboidCalc函数中的代码

<!DOCTYPE html>
<html>
<body>
<p>volume only</p>
<input type="button" onclick="cuboidCalc()"> cuboidCalc <br>
<input type="button" onclick="cylinderCalc()"> cylinderCalc <br>
<input type="button" onclick="triPrismCalc()"> triPrismCalc <br>

<p id="outputOne"></p>

<p id="outputTwo"></p>

<script>
function cuboidCalc() {
    document.getElementById("outputOne").innerHTML = "hight: <input type="number" id="hight" value="">";

}
function cylinderCalc() {

}
function triPrismCalc() {

}
</script>

Answer 1

问题在于您的双引号（"..."），因为您使用它们来封闭并在函数内指定属性值。尝试用单引号替换封闭或内部双引号：

function cuboidCalc() {
    document.getElementById("outputOne").innerHTML = 'hight: <input type="number" id="hight" value="">';
}

编辑：为了更好地解释这一点，字符串语句中的双引号将使语句停止，因此在它之后的任何内容都将被理解为代码，因此没有任何意义。这就是您必须更改引号的原因，因此可以将其理解为包含整个语句，而其他语句可以在其中用于指定属性值。如果需要更多引号，请使用反斜杠（\）转义字符，例如。 statement = '<input onClick="foo(\'bar\')">'。

这是demo。

Answer 2

我想改变你的报价：

function cuboidCalc() {
    document.getElementById("outputOne").innerHTML = "hight: <input type='number' id='hight' value=''>";

}

如果输入有任何差异，我也将输入更改为<button>

html / javascript将脚本添加到我的页面

2 个答案: