DOMを変更するトグルボタン

-1

クリックすると上のテキストを変更できるボタンを作成しようとしています。しかし、私はまた、それをもう一度押すと元に戻します。これまで私が持っていたコードはありますが、ボタンは何もしていません。DOMを変更するトグルボタン

<!doctype.html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <h1>Javascript</h1> 
 
    <p id="display">Change my text!</p> 
 
    <button onClick="writeMe()">Click me!</button> 
 
</body> 
 
<script> 
 
    function writeMe() { 
 
    if (document.getElementById("display") === "Change my text!") { 
 
     document.getElementById("display").innerHTML = "Hello world!"; 
 
    } else if (document.getElementById("display") === "Hello world!") { 
 
     document.getElementById("display").innerHTML = "Change my text!"; 
 
    } 
 
    } 
 
</script> 
 

 
</html>

ありがとうございます！

出典

2017-09-12 Mitch Reid

if文が見つからない.innerhtml if（document.getElementById（ "display"）。innerHTML === "テキストを変更！"） – schylake

document.getElementById()をチェックする条件は、それはだ要素を返す場合は、上のinnerHTMLに言及し忘れています決してと同じではありません。文字列です。

適切なイベントハンドラを使用し、代わりに要素textContentをチェックし、テキストを変更したい場合はそのプロパティを設定します。
実際のHTMLを追加する場合は、代わりにinnerHTMLを使用します。

document.getElementById('myButton').addEventListener('click', writeMe) 
 

 
function writeMe() { 
 
    var display = document.getElementById("display"); 
 

 
    if (display.textContent === "Change my text!") { 
 
    
 
    display.textContent = "Hello world!"; 
 
    
 
    } else if (display.textContent === "Hello world!") { 
 
    
 
    display.textContent = "Change my text!"; 
 
    
 
    } 
 
}

<h1>Javascript</h1> 
 
<p id="display">Change my text!</p> 
 
<button id="myButton">Click me!</button>

はおそらく、これらのif文を書くためにもDRY'er方法はありますが、これは冗長で、かつ読みやすいはずです。

出典

2017-09-12 14:47:41 adeneo

ありがとうございました！ほんとうにありがとう。 –

あなたは大歓迎です！ – adeneo

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <h1>Javascript</h1> 
 
    <p id="display">Change my text!</p> 
 
    <button onClick="writeMe()">Click me!</button> 
 
</body> 
 
<script> 
 
    function writeMe() { 
 
     if (document.getElementById("display").innerHTML === "Change my text!") { 
 
      document.getElementById("display").innerHTML = "Hello world!"; 
 
     } else if (document.getElementById("display").innerHTML === "Hello world!") { 
 
      document.getElementById("display").innerHTML = "Change my text!"; 
 
     } 
 
    } 
 
</script> 
 

 
</html>

出典

2017-09-12 14:47:24

function writeMe() { 
 
    if (document.getElementById("display").innerHTML === "Change my text!") { 
 
    document.getElementById("display").innerHTML = "Hello world!"; 
 
    } else if (document.getElementById("display").innerHTML === "Hello world!") { 
 
    document.getElementById("display").innerHTML = "Change my text!"; 
 
    } 
 
}

<p id="display">Change my text!</p> 
 
<button onClick="writeMe()">Click me!</button>

出典

2017-09-12 14:47:29 prasanth

あなたは私たちがinnerHTMLプロパティを使用する必要があるテキストのHTMLを取得するようステートメント

出典

2017-09-12 14:48:02

使用.innerHtmlは、文字列を取得する場合は、あなたに.innerHTMLを追加する必要があります。

function writeMe() { 
     if (document.getElementById("display").innerHTML === "Change my text!") { 
      document.getElementById("display").innerHTML = "Hello world!"; 
     } 
     else if (document.getElementById("display").innerHTML === "Hello world!") { 
      document.getElementById("display").innerHTML = "Change my text!"; 
     } 
    }

出典

2017-09-12 14:48:40 DMishra

あなただけの読みと比較するために、あなたの要素の.innerHTML財産を忘れてしまったように見えます。それがなければ、要素自体をターゲットにしているだけで、テキスト文字列と同じではありません。

したがって、たとえば、この行：

if (document.getElementById("display") === "Change my text!") {

は次のようになります。

if (document.getElementById("display").innerHTML === "Change my text!") {

はここで働いている（と少し短く）あなたのコードのバージョン：

<!doctype.html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <h1>Javascript</h1> 
 
    <p id="display">Change my text!</p> 
 
    <button onClick="writeMe()">Click me!</button> 
 
</body> 
 
<script> 
 
    function writeMe() { 
 
    var el = document.getElementById("display"); 
 
    el.innerHTML === "Change my text!" ? el.innerHTML = "Hello world!" : el.innerHTML = "Change my text!"; 
 
    } 
 
</script> 
 

 
</html>

出典

2017-09-12 14:57:09 freginold

DOMを変更するトグルボタン

答えて

関連する問題