p値==文字列が機能しない場合

Question

jQueryを使用してJavaScriptを学習し始めています。

私は、次のコードを持っている：

$(document).ready(function(){ 
 
    $("#p1").click(function(){ 
 

 
     var input = document.getElementById("p3"); 
 

 
     if (input.value == "Hi") 
 
     { 
 
      message = "Bye"; 
 
     } else { 
 
      message = "Hi"; 
 
     } 
 

 
     $("#p3").text(message); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 

 
    <p id="p1">Click on me.</p> 
 
    <p id="p2">Click on me again.</p> 
 
    <p id="p3">Click on me one more time.</p> 
 

 
</div> 
 

それは、P1の最初のクリックで動作しますが、私はもう一度クリックしたとき、それは

Answer 1

"さようなら" に変更されません。それはpアラグラフであり、inputではないので、.valueは必要なものを提供していません。代わりに.textContentを使用してください。

$(document).ready(function() { 
 
    $("#p1").click(function() { 
 

 
    var input = document.getElementById("p3"); 
 

 
    if (input.textContent == "Hi") { 
 
     message = "Bye"; 
 
    } else { 
 
     message = "Hi"; 
 
    } 
 

 
    $("#p3").text(message); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 

 
    <p id="p1">Click on me.</p> 
 
    <p id="p2">Click on me again.</p> 
 
    <p id="p3">Click on me one more time.</p> 
 

 
</div>

---

ここで無jQueryのバージョンです：一貫性の便宜上

document.addEventListener("DOMContentLoaded", function() { 
 
    document.querySelector("#p1").addEventListener("click", function() { 
 
    var p3 = document.getElementById("p3"); 
 
    p3.textContent = p3.textContent == "Hi" ? "Bye" : "Hi"; 
 
    }); 
 
});

<div id="div1"> 
 
    <p id="p1">Click on me.</p> 
 
    <p id="p2">Click on me again.</p> 
 
    <p id="p3">Click on me one more time.</p> 
 
</div>

Answer 2

、私がいただきたいjQueryを使ってP3のアップを見て、 text（）メソッドをオフにするそれ。入力値が故に未定義であるため、if (input.value == "Hi")そもそも

$(document).ready(function(){ 
 
    var $p3 = $('#p3'); 
 
    
 
    $("#p1").click(function(){ 
 
     var message = "Hi"; 
 
     
 
     if ($p3.text() === "Hi") message = "Bye"; 
 

 
     $p3.text(message); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 

 
    <p id="p1">Click on me.</p> 
 
    <p id="p2">Click on me again.</p> 
 
    <p id="p3">Click on me one more time.</p> 
 

 
</div>

Answer 3

は常に常に「こんにちは」