0

いくつかのjavascriptsスクリプトを正しく機能させるのに苦労しています。

1つ目は、テキストボックスの簡単な検証スクリプトです。一度は機能しますが、もう一度送信を押すと、何も入力せずに続行できます。送信ボタンがクリックされるたびにスクリプトを起動（および動作）させるにはどうすればよいですか？

私がやろうとしている2番目のことは、ラジオのクリックに基づいてdivクラスを変更することです。問題は、すべてのラジオボタンが同じID /名を共有しているため、どのラジオボタンがクリックされたかに関係なく、最初のラジオボタンの背景が常に変更されることです。それを含むdivのクラスを変更するにはどうすればよいですか？

HTMLは次のようになります（示されているように、headタグにjavascriptが含まれています...

<head>
<link href="/css/0051.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

function validateForm() {
        var x=document.forms["form"]["txtbox_1501"].value;
    if (x==null || x=="" || x=="Please type your answer in this box")
    {
        document.getElementById("txtbox_container").id = "txtbox_err";
        document.getElementById("ques_txt").className = "ques_txt_err";
        document.getElementById("ques_inst").className = "ques_inst_err";
        return false;
    }
}

function radioDiv() {
    document.getElementById("radio_label").className = "radio_input_selected";
}

</script>

</head>

<body>


<form id="form" name ="form" action="/php/process.php" onsubmit="return validateForm()"  method="post">

<div id="txtbox_container">
       <div id="ques_container">
          <a id="ques_txt" class="ques_txt">Please tell us your name:</br></a>
          <a id="ques_inst" class="ques_inst">(How you would like to be referred to in this demo)</br></a>
       </div>
       <div id="txtbox_input">
          <input type="text" name="txtbox_1501" value="Please type your answer in this box" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" /></br>
       </div>
    </div>

    <div id="radio_container">
       <div id="ques_container">
          <a class="ques_txt">What is your gender?</br></a>
          <a class="ques_inst">(Are you female or male?)</br></a>
       </div>
       <label>
          <div id="radio_label" class="radio_input">
             <input type="radio" name="radio_1503" value="2" onclick="return radioDiv()" />
             <a class="radio_label">Female</a>
          </div>
       </label>
       <label>
          <div id="radio_label" class="radio_input">
             <input type="radio" name="radio_1503" value="1" onclick="return radioDiv()" />
             <a class="radio_label">Male</a>
          </div>
       </label></div> 
</div>      

<div id="button">
   <input type="submit" class="submitbutton" value=""/>

</div>  

    </form>

</body>

どんな提案でもありがたく受け取られるでしょう。ありがとう。

4

1 に答える 1

0

送信ボタンがクリックされるたびにスクリプトを起動（および動作）させるにはどうすればよいですか？

このコード行を初めて実行するとき：

document.getElementById("txtbox_container").id = "txtbox_err";

正しく実行されます。ただし、その後の呼び出しでは、存在しなくなっgetElementByIdたを渡すことはできません。（その要素を別idの要素で上書きしただけです）id

したがって、2回目の呼び出し以降にgetElementById("txtbox_container")戻り、のプロパティを設定しようとすると、この致命的なエラーが発生します。nullidnull

Uncaught TypeError：nullのプロパティ'id'を設定できません

これは、戻る前に関数を壊しfalse、フォームを正常に送信します。

その行をコメントアウトするか、スタイルが必要な場合は、classを変更する代わりにCSSを変更/追加することができますid。

それを含むdivのクラスを変更するにはどうすればよいですか？

id無効なマークアップと同じ要素を2つ持つことはできません。代わりに、クリックされたラジオボタン要素（this）への参照を関数に渡し、parentNode必要に応じてスタイルを変更できるようにします。

//HTML
onclick="return radioDiv(this)"
//JS
function radioDiv(el) {
    el.parentNode.className = "radio_input radio_input_selected";
}

radioユーザーが別のクラスを選択した場合に備えて要素をリセットしたいので、元のクラスも保持していますradio。

function radioDiv(el) {
    var radios = document.getElementsByClassName('radio_input');
    //could use a for loop to reset these, but there are only 2 radios...
    radios[0].className = "radio_input"; radios[1].className = "radio_input";
    el.parentNode.className = "radio_input radio_input_selected";
}​

どうぞ。

JSFiddleライブデモ

チップ：

常にHTMLを検証してください。優れたJSコーディングには、堅牢なDOM構造が必須です。W3C検証サービスは少し要求が厳しいかもしれませんが、優れたマークアップ蛍光ペンプログラムは、閉じられていない無効な構文タグを表示する可能性があります。JSFiddle.netオンラインエディターですら。

JSコンソールにエラーがないか常に確認してください。Firefox
：Ctrl + Shift + K （またはFirebugをインストールしてF12を押します）。
Chrome：F12を押して、[コンソール]タブを選択します。

これにより、このようなコードを壊す可能性のあるエラーが表示されるため、次回解決できない場合は、質問に投稿することができます。:)

于 2012-06-14T23:19:22.383 に答える