2016-11-01 3 views
1

私は、ページ上をクリックするとコンテンツが変化するウェブページ上にテキストボックスを作成しようとしています。テキストの内容を簡単に変更できるように、変数を使用したいだから、htmlで掘り下げるのではなく、文字列変数の内容を変更するだけです。pクラスの特定のコンテンツをチェックし、htmlファイルのjavascriptに基づいてifステートメントを作成するにはどうすればよいですか?

これまでのところ、テキストボックスを作成して最初のメッセージから2番目のメッセージに変更することができましたが、ifステートメントを使って存在を確認する方法を理解できませんでした第3のメッセージを表示することができる。

現時点では、私のコードは次のようになります(いくつかのものが取り出され、フルコードを見たい場合はGitHub hereでプロジェクトが起動しています)。

ヘッド:

<head> 

<script> 
     var text1 = "This is Emilia's portfolio site, where you can find her games, illustrations and interaction design projects, as well as a short bio and her contact info."; 
     var text2 = "What would you like to do?"; 

    //set the first message the mascot character will say 
    window.onload = function starting() {document.getElementById("changetext").innerHTML = "안녕하세요! Emilia is in Korea right now, but if you need help I\'m here to guide you!"; 
    } 

    //set what will happen once you click the textbox 
    function characterDialogue(){ 

     //if (#changetext == "안녕하세요! Emilia is in Korea right now, but if you need help I\'m here to guide you!"){ 
      document.getElementById('changetext').innerHTML = text1 ; 
     //} 
    } 
</script> 
</head> 

ボディ:

<body onclick="characterDialogue()"> 

<div class="textbox"> 
     <div class="textboxspeechtext"> 
       <p id="changetext"></p> 
     </div> 
</div> 

</body> 

現在、もしなステートメント現在はまったく動作しません。私は実際にjavascriptを使って作業をしていないので、htmlと一緒にリンクする方法を理解するのに問題があります。同様の問題は、私がやりたいことに直接当てはまらないようです。読んでくれてありがとう。あなたがinnerHtml背中を取得し、変数と比較する必要が

答えて

0

: -

var text1 = "안녕하세요! Emilia is in Korea right now, but if you need help I\'m here to guide you!"; 
 
var text2 = "This is Emilia's portfolio site, where you can find her games, illustrations and interaction design projects, as well as a short bio and her contact info."; 
 
var text3 = "What would you like to do?"; 
 

 
//set the first message the mascot character will say 
 
window.onload = function starting() { 
 
    document.getElementById("changetext").innerHTML = text1; 
 
} 
 

 
//set what will happen once you click the textbox 
 
function characterDialogue() { 
 
    var current = document.getElementById('changetext').innerHTML; 
 
    if (current == text1){ 
 
    document.getElementById('changetext').innerHTML = text2; 
 
    } 
 
    if (current == text2){ 
 
    document.getElementById('changetext').innerHTML = text3; 
 
    } 
 
}
<body onclick="characterDialogue()"> 
 

 
    <div class="textbox"> 
 
    <div class="textboxspeechtext"> 
 
     <p id="changetext"></p> 
 
    </div> 
 
    </div> 
 

 
</body>

0

あなたのIF文は、最初のテキストと"#changetext"を比較するには、これは正しくありません。代わりに、現在の内容をchangetextにし、それをtext1と比較する必要があります。

使用してHTMLコンテンツを取得します。 使用してHTMLコンテンツを設定しdocument.getElementById('changetext').innerHTML

document.getElementById('changetext').innerHTML = "New Text"

をだからあなたのIF文は次のようになります。

if (document.getElementById('changetext').innerHTML == text1)

関連する問題