Javascript/HTML 错误 “the value of the property “selectReason” 为 null 或未定义，不是函数对象

Question

嗨，我是 javascript 和 html 的新手，想知道是否有人可以帮助我理解为什么这个错误不断发生。基本思想是我有一个包含多个选项的下拉列表。当客户选择一个选项时，会触发 onchange 事件，该事件会将所选选项的值写入文本区域。但是，当我调试它时，我收到上面的消息，我已包含下面的相关代码片段:

function selectReason() {
    var selectindex = document.getElementById("selectmessage").selectedIndex;    
    var selecttext = document.getElementById("selectmessage").value;
    document.getElementById("Txt").value = selecttxt;
}

<TR style="DISPLAY: none; VISIBILITY: hidden" id=sel>
    <TD width="60%" align=left>Please select a reason</TD>
    <TD width="40%" align=left>
        <SELECT id="selectmessage" onchange="selectReason()" style="WIDTH: 425px"></SELECT>
    </TD>
</TR>

Answer 1

您可能缺少 <table>标签，因为这给我带来了问题。您提供的代码片段还有 var selecttext和document.getElementById("Txt").value = selecttxt; <- 缺少一个 e。

下面提供的代码片段对我有用。可能只是未能关闭函数/html 中某处的标签。

此外(这可能是您添加内联以提供更好的图片)您应该避免内联样式和(对我来说)函数。包含 .css 和 .js 文件。

function selectReason() {
  var selectindex = document.getElementById("selectmessage").selectedIndex;   
  var selecttext = document.getElementById("selectmessage").value;
  var elem = document.getElementById("hey");
  elem.innerHTML = selecttext;
}

// Events to attach
function init () {
  var elem = document.getElementById('selectmessage');
  elem.addEventListener('change', selectReason)
 }

// Run 'init' when the DOM is ready (jQuery's $(document).ready() )
document.addEventListener("DOMContentLoaded", init, false);

<table>
<TR>
<TD>Please select a reason</TD>
<TD>
  <SELECT id="selectmessage">
  <option>Hello</option>
  <option>Yes</option>
  </SELECT>
</TD>
</TR>
<tr>
    <td id='hey'></td>
 </tr>
  </table>