如何 return 来自数据列表的结果而不出现 "undefined" 错误

Question

当从 datalist 中选择一个选项时，我希望所选选项出现在页面中，只需按回车键即可。我是初学者编码器。也许问题是 value 未定义。我应该如何定义它？

编辑：如果我指定值，例如 [5]，我能够得到想要的结果，但是我不确定如何用变量切换 [5]，比方说[i].

var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function testResults(input) {
    var x = document.getElementById("myInput").options[5].innerHTML;
    document.getElementById("test").innerHTML = x;
    }

<input list="myInput" value="">
<button id="myButton" onClick="testResults(this.input)">submit</button>

<datalist id="myInput">
<option>Alabama</option>
<option>California</option>
<option>Hawaii</option>
<option>Indiana</option>
<option>Montana</option>
<option>Nevada</option>
<option>Vermont</option>
<option>Washington</option>
</datalist>

<p></p>
<div id="test">Selected option innerHTML goes here on keyCode === 13</div>

Answer 1

目前我已经做了一个改变，你的其他逻辑我还不清楚。

已添加 id="myInputId"。

从方法 testResults()

中删除了 input 变量

var input = document.getElementById("myInputId");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function testResults() {
     /*var i = myInputId.options.indexOf(value);
    var x = document.getElementById("myInput").options[i].innerHTML;
    document.getElementById("test").innerHTML = x;*/
    document.getElementById("test").innerHTML = input.value;
}

<input list="myInput" id="myInputId" value="">
<button id="myButton" onClick="testResults()">submit</button>

<datalist id="myInput">
<option>Alabama</option>
<option>California</option>
<option>Hawaii</option>
<option>Indiana</option>
<option>Montana</option>
<option>Nevada</option>
<option>Vermont</option>
<option>Washington</option>
</datalist>

<p></p>
<div id="test">Selected option innerHTML goes here on keyCode === 13</div>

如何 return 来自数据列表的结果而不出现 "undefined" 错误

How to return a result from datalist without getting "undefined" error

html

javascript

html-datalist