Javascript 验证脚本只触发一次&无法选择特定的无线电父div_Javascript

Javascript 验证脚本只触发一次&无法选择特定的无线电父div

javascript

Javascript 验证脚本只触发一次&无法选择特定的无线电父div,javascript,Javascript,我正在努力让几个Javascript正常工作第一个是文本框上的一个简单验证脚本。它只工作一次，但如果您再次点击提交按钮，则无需输入任何内容即可继续。如何使脚本在每次单击submit按钮时启动并工作我要做的第二件事是让一个div类基于一个无线电点击进行更改。问题在于，由于所有单选按钮共享相同的id/名称，因此无论单击哪个单选按钮，都会更改第一个单选按钮的背景。如何让它更改包含它的div的类 HTML看起来像是头部标记中的javascript，如图所示 <head> <link

我正在努力让几个Javascript正常工作

第一个是文本框上的一个简单验证脚本。它只工作一次，但如果您再次点击提交按钮，则无需输入任何内容即可继续。如何使脚本在每次单击submit按钮时启动并工作

我要做的第二件事是让一个div类基于一个无线电点击进行更改。问题在于，由于所有单选按钮共享相同的id/名称，因此无论单击哪个单选按钮，都会更改第一个单选按钮的背景。如何让它更改包含它的div的类

HTML看起来像是头部标记中的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>

如有任何建议，我们将不胜感激。谢谢

如何使脚本在每次提交时启动并工作按钮被点击了吗

第一次运行这行代码时：

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

正确执行。但是，在下面的任何调用中，您将无法通过一个不再存在的id获取ElementById！您只是将该元素的id改写为另一个

因此，getElementByIdtxtbox_容器从第二次调用开始返回null，尝试设置null的id属性会产生以下致命错误：

未捕获的TypeError:无法将属性“id”设置为null

这会在返回false之前中断函数，从而使表单正常提交

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

如何让它更改包含它的div的类

不能有两个id相同的元素，因为它的标记无效。相反，将对单击单选按钮元素的引用传递给函数，并使其父节点根据需要更改样式：

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

我还保留了原始类，因为您可能希望重置无线电元素，以防用户选择其他无线电：

给你

小贴士:

始终验证您的HTML，对于任何好的JS编码来说，坚固的DOM结构都是必须的。W3C验证服务的要求可能有点太高，但是任何好的标记高亮程序都可以向您显示未关闭和无效的语法标记，甚至是在线编辑器

始终检查JS控制台是否存在错误： Firefox:Ctrl+Shift+K或安装并按F12键； Chrome：按F12并选择Console选项卡

这将显示错误，这些错误可能会破坏您的代码，例如此错误，因此，如果您下次无法解决这些问题，您可以将其张贴在问题中：

不能有两个id相同的元素。这是无效的HTML。ID是唯一的。更不用说和其他一些无效标记了。请注意，a的值始终为，因此x==null将始终返回false。请参阅。感谢提供的解决方案和常规指针，它们都非常有用。

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