为什么我的脚本不更改 HTML 中的文本？答案

【问题标题】：Why doesn't my script change the text within my HTML?为什么我的脚本不更改 HTML 中的文本？
【发布时间】：2012-04-18 15:07:45
【问题描述】：

我有以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>

    <title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />


<script type="text/javascript">
    if (document.getElementById('small').checked) {
        document.getElementById('total').innerHTML = '$1.00';
    }
    else {
    }
</script>
<div id="total">$0.00</div>
</form>
</body>
</html>

我希望脚本将总量的文本更改为1.00美元而不是0.00美元，而在id small的radiobutton被检查时。但是，当我选择它时没有任何反应。我错过了什么？

【问题讨论】：

脚本需要放在总div下面。它在 DOM 的那部分加载之前运行，因此找不到“total”
您的脚本在页面加载时和任何用户交互之前运行。您需要将事件（例如单击单选按钮）绑定到您的代码。
但是，当单选按钮发生变化时，脚本将不会运行。您需要为此添加一个事件。

标签： javascript forms html radio-button

【解决方案1】：

它不更新的原因是该脚本出现在代码中<div id='total'> 之前。而且，更重要的是，由于脚本在出现在页面中时会立即执行，因此它会在total 元素添加到 DOM 之前运行。

要解决此问题，您需要将脚本移到 HTML 代码中的较低位置，或者让脚本仅在页面完成加载后运行。这些选项中的第一个是让您启动和运行的快速解决方案；后者可能是更推荐的选项。

要让它仅在页面加载完成后运行，请将其包装到一个函数中，并使用页面上的onload 事件来触发它。或者，如果您使用的是 JQuery，请将其添加为 $(document).ready() 函数。

【讨论】：

【解决方案2】：

脚本是按顺序读取的。当您的 javascript 运行时，页面上没有带有 id total 的元素，因为它位于脚本下方。

但是即使您移动下面的代码，它仍然无法工作，因为单选按钮没有附加点击事件。您的脚本仅检查单选按钮是否在页面加载时以某种方式被神奇地选择并更改文本。例如，此代码将更改文本，但需要您对选中的单选按钮进行硬编码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>

    <title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" checked="checked" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />

<div id="total">$0.00</div>

<script type="text/javascript">
    if (document.getElementById('small').checked) {
        document.getElementById('total').innerHTML = '$1.00';
    }
    else {
    }
</script>


</form>
</body>
</html>

我认为您真正想要做的是将“点击”事件附加到单选按钮。

【讨论】：

【解决方案3】：

通过以下方式将单选按钮上的点击事件与您的代码联系起来：

var small = document.getElementById('small');
if (small.addEventListener) {
    small.addEventListener('click', calc, false);
} else if (small.attachEvent) {
    small.attachEvent('onclick', calc);
}
function calc() {
    if (document.getElementById('small').checked) document.getElementById('total').innerHTML = '$1.00';
};

jsFiddle example.

【讨论】：

【解决方案4】：

这是一个基于代码关键部分的工作示例：http://jsfiddle.net/9hxDq/

您需要执行代码以响应事件（例如单击、加载事件或响应被单击的输入）
您的某些标记无效（TABLE 内的U 标记）

HTML

<table border="1" align="center">
    <tr><td><input type="radio" name="size" id="small" />Small</td></tr>
    <tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
    <tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>

<input type="button" value="Calculate" onclick="calculate()" />

<div id="total">$0.00</div>

JavaScript

function calculate()
{
    if (document.getElementById('small').checked) 
    {
        document.getElementById('total').innerHTML = '$1.00';
    }
    else 
    {
        alert("not checked!");
    }
}

【讨论】：

【解决方案5】：

您没有获得 1.00 美元的原因是 - 里面的代码将在页面加载时执行。但是您需要在收音机的某些事件上设置 div 的值，而不是在页面加载事件上。

所以在某个函数中使用您的代码并在单选按钮的点击事件中调用该函数

【讨论】：

【解决方案6】：

你必须在某个事件上调用一个函数——JS 基本上是在事件上运行的！！

<input type="radio" name="size" id="small" onclick="yourFxn()" />Small</td>

在你的脚本中

function yourFxn(){
if (document.getElementById('small').checked) {
    document.getElementById('total').innerHTML = '$1.00';
 }
 else {
 }
}

【讨论】：