javascript - 无法使用 javascript 运行 html 单选按钮

Question

我的 < head > 中有这个脚本:

<script>
var rad = document.getElementsByName('search_type');
alert(rad[1]);
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
        (prev)? console.log(prev.value):null;
        if(this !== prev) {
            prev = this;
        }
        console.log(this.value)
        alert(this.value);
    };
}
</script>

这是我的表格:

<form name="search_form" action="<?php echo $_SERVER['PHP_SELF']?>" method="post"> 
    <table border="0"> 
        <tr>
            <td class="input">
                <input type="radio" name="search_type" value="search_code" checked>1st type<br>
                <input type="radio" name="search_type" value="search_title">2nd type<br>
                <input type="radio" name="search_type" value="search_filter">3rd type<br>
            </td>
        <tr/>
    </table> 
</form>

但是没有任何警报起作用。我在控制台没有错误。请帮忙。

Answer 1

您正在解析单选按钮的 HTML 代码之前运行脚本。

将脚本放在表单下方，或在加载事件中运行代码:

window.onload = function() {

  var rad = document.getElementsByName('search_type');
  alert(rad[1]);
  var prev = null;
  for (var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
      (prev)? console.log(prev.value):null;
      if(this !== prev) {
        prev = this;
      }
      console.log(this.value)
      alert(this.value);
    };
  }

};