显示HTML元素的值时，JavaScript代码不起作用

Question

我想在div元素中显示详细信息(id =" 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>

Answer 1

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

如果要在单击元素时读取值，则需要在事件处理程序功能中进行。

Answer 2

您的脚本部分应如下更新，

<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在全局范围中，这些变量在单击按钮时不加载页面时分配了值。

Answer 3

在此过程中声明变量时，应该小心；他们应该在点击事件处理程序中。

以下是我的工作代码(带有变量和类名称(。

html：

<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>

javaScript：

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(); 

codepen在这里