Question

我正在尝试将文本框中的输入显示到p1元素中。

我能够获得第一个文本框中的值。但是，我无法从其他文本框中获取值。我有相同的语句来显示在文本框中输入的值。但是它仅显示“名字”的值。

单击“提交”按钮后，除“名字”之外的所有内容均保持不变。

 <body>
 <form>
    First name:     <input type="text" id="firstname"> <br/>
    Middle initial: <input type ="text" id="middleinitial"> <br/>
    Last name:      <input type ="text" id="lastname"> <br/>
    Age:            <input type ="text" id="age"> <br/>
    Address:        <input type ="text" id="address"> <br/><br/>
    SEAT RESERVATION <br/>
    Row:            <input type ="text" id="row"> <br/>
    Column:         <input type ="text" id="col"> <br/>
    <input type="button" onclick="display_reservation_information()"><br/>
 </form>

 Full name: <p1 id="last_name_display">NaN</p1>, <p1 
 id="first_name_display">NaN</p1> <p1 id="middle_inital_display">NaN</p1>  
 <br/>
    Age: <p1 id="age_display">NaN</p1> <br/>
    Address: <p1 id="address_display">NaN</p1> <br/>
    Seat reserved: Row <p1 id="row_display">NaN</p1>, Column <p1 
    id="column_display">NaN</p1> <br/>

<script>

     function display_reservation_information(){
        document.getElementById("first_name_display").innerHTML = 
        document.getElementById("firstname").value;
        document.getElementById("middle_initial_display").innerHTML = 
        document.getElementById("middleinitial").value;
        document.getElementById("last_name_display").innerHTML = 
        document.getElementById("lastname").value;
    }
 </script>
 </body>

编辑：我添加了将值放入其中的元素。我忘了添加它们，但是我首先添加了它们，但仍然无法正常工作。

Answer 1

首先，您可以创建一个函数，该函数接受两个参数，即输入值和一个用于这些值的占位符。其次，您在<form>上创建一个 submit事件监听器，并使用不同的参数多次调用其内部的函数，如下所示：

HTML：

<form id="submitBtn">
    First name: <input type="text" id="firstname"> <br/>
    Middle initial: <input type ="text" id="middleinitial"> <br/>
    Last name: <input type ="text" id="lastname"> <br/>
    <input type="submit"><br/>

    <p id='firstNameValue'></p>
    <p id='middleInitial'></p>
    <p id='lastName'></p>
</form>

JavaScript：

display_reservation_information = (element, valueHolder) => {
    const elementInput = document.getElementById(element);
    let inputValueHolder  = document.getElementById(valueHolder)

    let elementInputValue = elementInput.value;

    inputValueHolder.innerHTML = elementInputValue;

};

const submitButton = document.getElementById('submitBtn');

submitButton.addEventListener('submit', (e) => {
    e.preventDefault();

    display_reservation_information('firstname', 'firstNameValue');
    display_reservation_information('middleinitial', 'middleInitial');
    display_reservation_information('lastname', 'lastName');
});

您可以找到一个有效的代码示例 here 。

Answer 2

查看该代码，然后自己尝试。

HTML：

<input type="text" class="inp" id="name" />
<input type="text" class="inp" id="surname" />
<input type="text" class="inp" id="message" />
<button>take my data</button>

JS：

const inputs = document.querySelectorAll('.inp');
const btn = document.querySelector('button');

btn.addEventListener("click", () => {
    inputs.forEach(inp => {
    const div = document.createElement('div');
    div.textContent = inp.value;
    document.body.appendChild(div);
  })
})

我无法从每个文本框中获取所有值

2 个答案: