用JavaScript切換文字

我在學習JavaScript。我正在嘗試使用replaceChild()方法在頁面上切換文本。我想出了下面的代碼。我不明白爲什麼它不起作用。請幫助。用JavaScript切換文字

<html> 
<head> 

<script> 
    function toggleText() { 
     var be= document.getElementById("main"); 
     var b4= be.getElementsByTagName("h1"); 
     var l8 = document.createElement("h1").innerHTML="After"; 
     var l88 = document.createElement("h1").innerHTML="Before"; 
     if (b4[0].innerHTML=="Before"){ 
      be.replaceChild(l8,b4[0]) 
     } 
     if (b4[0].innerHTML=="After") { 
      be.replaceChild(l88,b4[0]); 
     } 
    } 
</script> 

</head> 
<body> 
    <div id="main" onclick="toggleText()"> 
     <h1>Before</h1> 
    </div> 
</body> 
</html>

來源

2014-01-22 lmission

@kapa有編輯:) –

旁註一個選項。如果（b4 [0] .innerHTML ==「之後出現''''''''''''後面'實際元素 – j08691

getElementsByTagName（」h1「）[0]我使用它的時候我覺得合適，謝謝:)。 – mplungjan

由於CBrone寫道，您必須先創建h1實例，將其存儲到變量，然後調用變量上的innerHML。

另一個問題是如果結構。首先替換元素，然後測試另一個條件的相同元素並執行另一個操作。在這種情況下，最好使用if ... else if ...而不是if ... if ...，這是問題的根源。

這裏工作toggleText功能

function toggleText() { 
    var be= document.getElementById("main"); 
    var b4= be.getElementsByTagName("h1"); 
    var l8 = document.createElement("h1"); 
    l8.innerHTML="After"; 
    var l88 = document.createElement("h1"); 
    l88.innerHTML="Before"; 
    if (b4[0].innerHTML == "Before") 
    { 
     be.replaceChild(l8, b4[0]); 
    } 
    else if (b4[0].innerHTML=="After") 
    { 
     be.replaceChild(l88, b4[0]); 
    } 
}

這裏工作fiddle

來源

2014-01-22 15:38:18

非常感謝你，你和CBroe非常有幫助。我會接受CBroe的回答。但對於像我這樣的初學者來說，視覺效果很長。 – lmission

除了什麼評論中有人說已：

var l8 = document.createElement("h1").innerHTML="After"; 
var l88 = document.createElement("h1").innerHTML="Before";

這是你的變量不包含所創建的元素的引用之後，但您分配給他們的innterHTML字符串值。（賦值操作的結果是賦值。）之後嘗試將文本值而不是元素引用傳遞給replaceChild必須失敗。

在兩個步驟中完成 - 首先創建元素並將其引用保存到變量中，然後再處理它們的innerHTML。

var l8 = document.createElement("h1"); 
l8.innerHTML="After"; 
var l88 = document.createElement("h1"); 
var l88 = .innerHTML="Before";

（也許用更適合的變量名，因爲如果你保持當前的「命名場面」了，你會感到困惑遲早的事。）

來源

2014-01-22 15:29:46 CBroe

可能我建議以下，爲了更好的可讀性：

<html> 
<head> 

<script> 
    function toggleText() { 
     var be= document.getElementById("main"); 
     var b4= be.getElementsByTagName("h1")[0]; 

     if (b4.innerHTML=="Before") { 
      b4.innerHTML = "After"; 
     } 
     else if (b4.innerHTML=="After") { 
      b4.innerHTML = "Before"; 
     } 
    } 
</script> 

</head> 
<body> 
    <div id="main" onclick="toggleText()"> 
     <h1>Before</h1> 
    </div> 
</body> 
</html>

來源

2014-01-22 15:36:27

用JavaScript切換文字

回答

相關問題