顯示html元素的值時JavaScript代碼不起作用

-1

我想在div元素（id =「displayStoragevol2」）中顯示詳細信息。爲什麼下面的代碼不起作用顯示html元素的值時JavaScript代碼不起作用

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

來源

2017-05-04 Aseem Sharma

取裏面的功能價值和使用'類型= 「按鈕」' – Satpal

你應該[瞭解如何使用標籤元素正確]（http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/）。如果沒有for屬性或者表單控件，標籤就沒用了。 – Quentin

您在頁面加載時讀取輸入值。那時他們是空白的。

如果您想在單擊元素時讀取值，則需要在事件處理函數內部執行此操作。

來源

2017-05-04 09:04:46 Quentin

我更新這樣'函數fetchFunction（）{\t \t \t \t \t = displayStoragevol2.innerHTML firstNamevol2.value; + lastNamevol2.value; }'並且它不顯示姓氏值 –

@AseemSharma - 'firstNamevol2'和'displayStoragevol2'是頁面加載時'value'屬性的副本。它們是空字符串，而不是輸入元素對象。 – Quentin

你的腳本部分應作如下更新，

<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是在全球範圍內時，單擊該按鈕時，頁面加載不是那些變量分配的值。

來源

2017-05-04 09:13:35

在流程中聲明變量時，應該小心;他們應該在點擊事件處理程序中。

以下是我的工作代碼（包含變量和類名稱）。

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 here

來源

2017-05-04 09:44:50

顯示html元素的值時JavaScript代碼不起作用

回答

相關問題