檢索沒有硬編碼id名稱的值

Question

目標：
從輸入框中檢索值，而不是在javascript中對文本「item2」進行硬編碼。

問題：
可以做到嗎？如果是，如何？

https://jsfiddle.net/2q7fwvq2/2/

<p>Example list:</p> 
 

 
<input id="test" value="item2"> 
 
    
 
    
 
<ul><li id="item1">Coffee (first li)</li><li id="item2">Tea (second li)</li></ul> 
 

 
<p>Click the button to get the HTML content of the previous sibling of the second list item.</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text 
 
is considered as nodes.</p> 
 

 
<p>If you add whitespace between the two li elements, the result will be "undefined".</p> 
 

 
<p id="demo"></p> 
 

 
<script> 
 
function myFunction() { 
 
    var x = document.getElementById("item2").previousSibling.innerHTML; 
 
    document.getElementById("demo").innerHTML = x; 
 
} 
 
</script>

Answer 1

您可以訪問您輸入的標籤與它的類名，以及你可以得到它作爲像JavaScript的HTML的第一個輸入標籤這個：

document.getElementsByTagName("input")[0].value; 

和使用jQuery：

$("input").first().val(); 

Answer 2

您可以指定id訪問輸入標籤：

var x = document.getElementById(document.getElementById('test').value).innerHTML; 

function myFunction() { 
 
    var x = document.getElementById(document.getElementById('test').value).innerHTML; 
 
    document.getElementById("demo").innerHTML = x; 
 
}

<input id="test" value="item2"> 
 
<ul> 
 
    <li id="item1">Coffee (first li)</li> 
 
    <li id="item2">Tea (second li)</li> 
 
    <li id="item3">Chai (third li)</li> 
 
</ul> 
 
<button onclick="myFunction()">Try it</button> 
 
<p id="demo"></p>