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が小さいラジオボタンがチェックされたときに、スクリプトでdiv合計内のテキストを$0.00ではなく$1.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の要素はありません。

ただし、以下のコードを移動しても、ラジオボタンにクリックイベントが発生しないため、機能しません。スクリプトは、ページの読み込み時にラジオボタンが魔法のように選択されているかどうかを確認し、テキストを変更するだけです。たとえば、このコードはテキストを変更しますが、チェックされたラジオボタンをハードコードする必要があります。

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

コードの重要な部分に基づいた実用的な例を次に示します。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!");
    }
}​
于 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

$ 1.00が得られない理由は、内部のコードがページの読み込み時に実行されるためです。ただし、必要なのは、ラジオのイベントでdivの値を設定し、ページの読み込みイベントではないことです。

したがって、いくつかの関数でコードを使用し、ラジオボタンのクリックイベントでその関数を呼び出します

于 2012-04-04T21:01:39.837 に答える
0

更新されない理由は、スクリプトがコードの前に表示されるため<div id='total'>です。さらに重要なのは、スクリプトがページに表示されるとすぐに実行されるため、total要素がDOMに追加される前に実行されるためです。

これを修正するには、スクリプトをHTMLコードの下位に移動するか、ページの読み込みが完了した後にのみスクリプトを実行する必要があります。これらのオプションの最初は、起動して実行するための簡単な修正です。後者がおそらくより推奨されるオプションです。

ページの読み込みが完了した後にのみ実行するには、ページを関数にラップしonload、ページ上のイベントを使用してトリガーします。または、JQueryを使用している場合は、それを$(document).ready()関数として追加します。

于 2012-04-04T21:26:43.527 に答える