[英]How to insert user selected value from datalist dropdown into a template string to be shown as a message to the user when submitted?
我在下面的表格中有 2 个数据列表。 我正在尝试获取选定的变量值(让 input1 和让 input2)显示在通过模板字符串变量let message
提交时出现的消息中,但它不起作用。 我没有收到任何错误。
知道为什么它不起作用吗? 并且可以简化事件侦听器,以便我不必为每个变量写出一个新变量,因为我有 4 个数据列表?
const victory = document.createElement('audio'), form = document.querySelector('form'), nameInput = document.querySelector('#name-input'), surnameInput = document.querySelector('#surname-input'), footer = document.querySelector('#footer'); const messageBox = document.createElement('div'); messageBox.setAttribute('class', 'message-box'); victory.src = 'sound/victory.mp3'; let input1 = nameInput.addEventListener('input', () => { const nameValue = surnameInput.value; }); let input2 = surnameInput.addEventListener('input', () => { const surnameValue = surnameInput.value; }); form.addEventListener('submit', (e) => { e.preventDefault(); let message = `You have succesfully ordered ${input1} ${input2}`; messageBox.appendChild(document.createTextNode(message)); victory.play(); footer.parentNode.insertBefore(messageBox, footer); messageBox.style.backgroundColor = 'green'; messageBox.style.textAlign = 'center'; messageBox.style.margin = '0 1rem 2rem'; messageBox.style.padding = '1rem'; messageBox.style.borderRadius = '5px'; });
<form action=""> <fieldset> <legend>Choose your skater</legend> <div> <label>Name</label> </div> <div> <input id="name-input" list="name" type="text" title="Select desired name of your skater"> <datalist id="name"> <option value="Tony" data-id="1"></option> <option value="Joe" data-id="2"></option> <option value="Paul" data-id="3"></option> <option value="Scott" data-id="4"></option> </datalist> </div> <div> <label>Surname</label> </div> <div> <input id="surname-input" list="surname" type="text" title="Select desired surname of your skater"> <datalist id="surname"> <option value="Hawk" data-id="1" label="james"></option> <option value="Carter" data-id="2"></option> <option value="Philmore" data-id="3"></option> <option value="Venice" data-id="4"></option> </datalist> </div> </fieldset> <button class="btn" type="submit" title="Submit your choice">Submit</button> </form> <footer id="footer"></footer>
您捕获输入值的方式是错误的。 这将起作用。
let input1 = '';
nameInput.addEventListener('input', () => {
input1 = nameInput.value;
});
let input2 = '';
surnameInput.addEventListener('input', () => {
input2 = surnameInput.value;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.