如何将用户从数据列表下拉列表中选择的值插入到模板字符串中，以便在提交时作为消息显示给用户？

Question

我在下面的表格中有 2 个数据列表。我试图让选定的变量值（let input1 和 let 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>

Answer 1

您捕获输入值的方式有误。这会起作用。

let input1 = '';
nameInput.addEventListener('input', () => {
   input1 = nameInput.value;
});

let input2 = '';
surnameInput.addEventListener('input', () => {
    input2 = surnameInput.value;
});

如何将用户从数据列表下拉列表中选择的值插入到模板字符串中，以便在提交时作为消息显示给用户？

How to insert user selected value from datalist dropdown into a template string to be shown as a message to the user when submitted?

javascript

html

html-datalist