0

我有以下代码：

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

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

4

6 回答 6

2

你必须在某个事件上调用一个函数——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 {
 }
}
于 2012-04-04T20:57:12.207 回答
1

脚本是按顺序读取的。当您的 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>

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

你可以在这里阅读更多：

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

于 2012-04-04T21:15:11.450 回答
0

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

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

于 2012-04-04T21:01:39.837 回答
0

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

  • 您需要执行代码以响应事件（例如单击、加载事件或响应单击的输入）
  • 您的某些标记无效（Ua 内的标记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!");
    }
}​
于 2012-04-04T20:59:56.293 回答
0

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

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 示例。

于 2012-04-04T21:01:19.553 回答
0

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

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

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

于 2012-04-04T21:26:43.527 回答