0

我正在努力让几个 javascripts 脚本正常工作。

第一个是文本框上的简单验证脚本。它工作一次，但如果您第二次点击提交，您无需输入任何内容即可继续。每次单击提交按钮时，如何使脚本触发（并工作）？

我要做的第二件事是让一个 div 类根据单选 click 进行更改。问题在于，因为所有单选按钮共享相同的 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用另一个元素覆盖了那个元素）

因此，从第二次调用开始getElementById("txtbox_container")返回null，并尝试设置 的id属性会null产生这个致命错误：

未捕获的类型错误：无法将属性“id”设置为 null

这会在返回之前破坏您的功能，false从而使表单正常提交。

您可以仅注释该行，或者如果您需要样式更改/添加 CSSclass而不是更改id.

如何让它改变包含它的 div 的类？

您不能有 2 个与id无效标记相同的元素。相反，将对单击的单选按钮元素 ( 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 回答