我无法获取数据列表中输入的值？

Question

I have a datalist box that looks like this:

<td>
    <input list="screens.screenid-datalist" type="text" id="screens.screenid" onblur="validate('0','0','jacques')">
    <datalist id="screens.screenid-datalist">
        <option value="Login"></option>
        <option value="ScreenCreator"></option>
    </datalist>
    <label id="val-screens.screenid" class="Label_Error" style="visibility: hidden;">*</label>
</td>

and I have a JavaScript code which has to get the value from this datalist.

I tried all the following things to get the value

document.getElementById('screens.screenid').value
document.getElementById('screens.screenid').text
document.getElementById('screens.screenid').innerHTML
document.getElementById('screens.screenid').option

and it just does not seem to work.

Is there something wrong with my JavaScript or with my HTML code?

when I use the console to get the value:

Answer 1

Took sometime to figure this out. Look at my code below :

 function validate(){ console.log(document.getElementById('screens.screenid').value); //WORKS console.log(document.getElementById('screens.screenid').text); console.log(document.getElementById('screens.screenid').innerHTML); console.log(document.getElementById('screens.screenid').option); } 

 <input list="screens.screenid-datalist" type="text" id="screens.screenid" onblur="validate('0','0','jacques')"> <datalist id="screens.screenid-datalist"> <option value="Login"></option> <option value="ScreenCreator"></option> </datalist> <label id="val-screens.screenid" class="Label_Error" style="visibility: hidden;">*</label> <a href='#' onclick="validate">validate</a> 

Now the first one will get the value as expected, but the text option will not work for the obvious reason that you do not have text here. Also, innerHTML will get you the child html and not the value. Further more , you can't get innerHTML of an input list, but you can get it for the datalist.

Try this : console.log(document.getElementById('screens.screenid-datalist').innerHTML);

I tried it and got the innerHTML without any hassle :

<option value="Login"></option>
<option value="ScreenCreator"></option>

Find the bin here : http://jsbin.com/inigaj/1/edit