显示html元素值时JavaScript代码不工作

我想在div elementid=displayStoragevol2中显示详细信息。为什么下面的代码不起作用

<hr>
<h3>LocalStorage App Vol-2</h3>
<label>First Name: </label><input type="text" id="firstNamevol2">
<label>Last Name: </label><input type="text" id="lastNamevol2">
<button type="submit" id="fetchDetailsvol2">Submit</button>
<div id="displayStoragevol2"></div>
<hr>

    <script>
    /*LocalStorage Vol 2*/
    document.getElementById('fetchDetailsvol2').addEventListener('click', fetchFunction);
    var firstNamevol2 = document.getElementById('firstNamevol2').value;
    var lastNamevol2 = document.getElementById('lastNamevol2').value;
    var displayStoragevol2 = document.getElementById('displayStoragevol2');


    function fetchFunction(){               
        displayStoragevol2.innerHTML = firstNamevol2 + lastNamevol2;
    }
</script>

---

当页面加载时，从输入读取值。当时它们是空白的

---

如果要在单击元素时读取值，则需要在事件处理程序函数中执行此操作。

脚本部分应更新如下：

<script>
document.getElementById('fetchDetailsvol2').addEventListener('click', fetchFunction);
var displayStoragevol2 = document.getElementById('displayStoragevol2');
function fetchFunction(){    
   var firstNamevol2 = document.getElementById('firstNamevol2').value;
   var lastNamevol2 = document.getElementById('lastNamevol2').value;
   displayStoragevol2.innerHTML = firstNamevol2 + lastNamevol2;
}
</script>

---

由于变量firstNamevol2和lastNamevol2在全局范围内，因此在加载页面时，而不是单击按钮时，会为这些变量分配值。

在过程中声明变量时应小心；它们应该位于单击事件处理程序中

下面是我的工作代码，其中整理了变量名和类名

HTML:

---

获取函数内部的值并使用`type=button`您应该这样做。如果没有for属性或表单控件，标签是无用的。我更新了如下函数fetchFunction{displayStoragevol2.innerHTML=firstNamevol2.value；+lastNamevol2.value；}，它不显示姓氏value@AseemSharma-firstNamevol2和displayStoragevol2是加载页面时value属性的副本。它们是空字符串，不是输入元素对象。

<h3>Input Data</h3>
<label>First Name:</label> <input type="text" id="firstName">
<label>Last Name:</label> <input type="text" id="lastName">
<button type="submit" id="fetchDetails">Fetch Details</button>
<hr>
<h3>Display Data:</h3>
<span id="displayFirstName"></span>
<span id="displayLastName"></span>
<hr>

function fetchData() {
  // On click of Fetch Details
  document.getElementById("fetchDetails").addEventListener("click", function(event){
    event.preventDefault();
    // Assign values to variables
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    // Display values in results field
    document.getElementById("displayFirstName").innerHTML = firstName;
    document.getElementById("displayLastName").innerHTML = lastName;
  });
}
fetchData();