我有一個<ul>包含情緒串列的<input>元素，以及一個用戶必須從串列中輸入選定值的元素。
要節省一些輸入，用戶只需單擊串列項，所選值將寫入輸入框中。
我想知道是否有任何方法可以使它成為一個回圈，所以我的代碼不是這么大的文字墻。
這是我的代碼：
//variable declarations
const input = document.getElementById('input')
const upbeat = document.getElementById('upbeat');
const emotional = document.getElementById('emotional');
const melancholic = document.getElementById('melancholic');
const hopeful = document.getElementById('hopeful');
const content = document.getElementById('content');
const sad = document.getElementById('sad');
const anxious = document.getElementById('anxious');
const angsty = document.getElementById('angsty');
//event handlers
upbeat.addEventListener('click', function () {
input.value = upbeat.innerHTML;
});
upbeat.addEventListener('click', function () {
input.value = upbeat.innerHTML;
});
emotional.addEventListener('click', function () {
input.value = emotional.innerHTML;
});
melancholic.addEventListener('click', function () {
input.value = melancholic.innerHTML;
});
hopeful.addEventListener('click', function () {
input.value = hopeful.innerHTML;
});
content.addEventListener('click', function () {
input.value = content.innerHTML;
});
sad.addEventListener('click', function () {
input.value = sad.innerHTML;
});
anxious.addEventListener('click', function () {
input.value = anxious.innerHTML;
});
angsty.addEventListener('click', function () {
input.value = angsty.innerHTML;
});
//HTML
<ul id="moods">
<li class="li" id="upbeat">upbeat</li>
<li class="li" id="emotional">emotional</li>
<li class="li" id="melancholic">melancholic</li>
<li class="li" id="hopeful">hopeful</li>
<li class="li" id="content">content</li>
<li class="li" id="sad">sad</li>
<li class="li" id="anxious">anxious</li>
<li class="li" id="angsty">angsty</li>
</ul>
<form id="form" action="index.html">
<input type="text" id="input" value="">
<button type="button" id="submit">Submit</button>
<button type="reset" id="reset" value="reset">Reset</button>
</form>
提前致謝！
uj5u.com熱心網友回復：
將單個偵聽器添加到#moods容器。單擊時，如果目標（單擊的元素）是 a <li>，則將輸入值設定為目標的.textContent。（您在 s 中沒有 HTML 標記<li>，只有文本，所以.textContent比 s 更合適.innerHTML）
const input = document.querySelector('input');
document.querySelector('#moods').addEventListener('click', (e) => {
if (e.target.matches('li')) {
input.value = e.target.textContent;
}
});<ul id="moods">
<li class="li" id="upbeat">upbeat</li>
<li class="li" id="emotional">emotional</li>
<li class="li" id="melancholic">melancholic</li>
<li class="li" id="hopeful">hopeful</li>
<li class="li" id="content">content</li>
<li class="li" id="sad">sad</li>
<li class="li" id="anxious">anxious</li>
<li class="li" id="angsty">angsty</li>
</ul>
<form id="form" action="index.html">
<input type="text" id="input" value="">
<button type="button" id="submit">Submit</button>
<button type="reset" id="reset" value="reset">Reset</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/526369.html
下一篇：以下代碼行有什么作用？