Как вернуть результат из списка данных без ошибки «undefined» - PullRequest
Новая
       10

Как вернуть результат из списка данных без ошибки «undefined»

0 голосов
/ 04 июля 2018

Когда опция выбрана из 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>

1 Ответ

0 голосов
/ 04 июля 2018

В настоящее время я внес одно изменение, и ваша логика покоя мне все еще не ясна.

Добавлено id="myInputId".

удалено input переменная из метода testResults()

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>
...