Question

我有以下代码：

<!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>

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

Answer 1

你要在某个事件上调用一个函数 - 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 {
 }
}

Answer 2

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

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

<!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>

我认为你真正想做的是将“点击”事件附加到无线电按钮上。

您可以在这里阅读更多内容：

http://www.w3schools.com/jsref/event_onclick.asp

Answer 3

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

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

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!");
    }
}

Answer 4

通过以下方式将单选按钮上的click事件绑定到您的代码：

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

Answer 5

你没有获得$ 1.00的原因是 - 内部代码将在页面加载时执行。但你需要的是在某个无线电事件和非ON页面加载事件上设置div的值。

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

Answer 6

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

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

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

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

6 个答案:

HTML

的JavaScript