文本不會寫入頁面，但會顯示在alert（）消息中。 JavaScript和HTML

我正在開發一個表單來收集一些信息。我在我的代碼中設置了一些設置，當名字文本框更改（onchange）時，子標題（<td>）將使用名字填充。文本不會寫入頁面，但會顯示在alert（）消息中。 JavaScript和HTML

由於某些原因，文本永遠不會寫入<td>，其中id的subHeader但是當我執行警報消息時，它就在那裏。我究竟做錯了什麼？

的JavaScript（不工作）：

function FirstName_onchange() { 
    var LastName = document.getElementById('LastName').value; 
    var FirstName = document.getElementById('FirstName').value; 
    document.getElementById('subHeader').value = FirstName + " " + LastName; 
}

的JavaScript（工程）：

function FirstName_onchange() { 
    var LastName = document.getElementById('LastName').value; 
    var FirstName = document.getElementById('FirstName').value; 
    alert(document.getElementById('subHeader').value = FirstName + " " + LastName); 
}

HTML：

<tr> 
    <td id="subHeader" colspan="4"> 
    </td> 
</tr>

來源

2013-08-17 mwilson

您應該使用['textContent']（https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent）而不是'value' – kalley

這樣做。爲什麼'.value'不適用於這種情況？ – mwilson

<td>標籤已經不看重

試想一下，這<td value="sample"></td>

必須使用.innerHTML或.innerTest或.textContent代替

function FirstName_onchange() { 
var LastName = document.getElementById('LastName').value; 
var FirstName = document.getElementById('FirstName').value; 
document.getElementById('subHeader').textContent = FirstName + " " + LastName; 
}

來源

2013-08-17 02:58:11

啊！這就說得通了。謝謝！ – mwilson

@mwilson：你不應該使用'innerHTML'。請參閱FakeRainBrigand的答案進行討論。 –

的.value成員僅供<input />，如果你想要快速設置元素的內容使用.textContent（或.innerText）或.innerHTML，像這樣：

function FirstName_onchange() { 

    var lastName = document.getElementById('LastName').value; 
    var firstName = document.getElementById('FirstName').value; 
    document.getElementById('subHeader').textContent = firstName + " " + lastName; 
}

注意.textContent優於.innerText，如果你使用.innerHTML那麼你應該過濾用戶輸入以避免XSS攻擊，例如。

來源

2013-08-17 02:57:29 Dai

'.textContent'會在所有1級瀏覽器中運行嗎？ – mwilson

@mwilson textContent屬性在所有主流瀏覽器中均受支持。 –

值僅適用於<input />和和<textarea /有效的屬性>。

您應該使用.innerHTML或.innerText和.textContent。技術上innerText無效，但IE需要它。

function FirstName_onchange() { 
    var LastName = document.getElementById('LastName').value; 
    var FirstName = document.getElementById('FirstName').value; 
    document.getElementById('subHeader').innerText = FirstName + " " + LastName; 
    document.getElementById('subHeader').textContent = FirstName + " " + LastName; 
}

來源

2013-08-17 02:59:28 FakeRainBrigand

如果您使用'innerHTML'，請務必用'<'，'>'和&'替換內容中的'<', '>'和'＆'。 –

@MichaelLiu，這基本上是'innerText' /'textContent'做的，但是，這對innerHTML來說是一個安全問題。 – FakeRainBrigand

是的，我只是想指出，OP應該不會**只寫'document.getElementById（'subHeader'）。innerHTML = FirstName +「」+ LastName;'，就像接受的答案一樣。 –

通過這樣做

alert(document.getElementById('subHeader').value = FirstName + " " + LastName);

，你增加了一個新的屬性 '值' 到TD對象，並通過它來提醒。這就是警報起作用的原因。

來源

2013-08-17 03:13:41 jaeheung

文本不會寫入頁面，但會顯示在alert（）消息中。 JavaScript和HTML

回答

相關問題