JavaScriptでhtmlテキストを変更する

-1

テーブル要素id = "questionLoc"の値を配列に配置した質問に変更しようとしています。下記のHTML ...JavaScriptでhtmlテキストを変更する

<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<script type="text/javascript" src="main.js"></script> 
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script> 
<title>Game of Thrones Trivia Quiz</title> 
</head> 
<body> 
<header> 
    <h1>Game of Thrones Trivia Quiz</h1> 
</header> 
<form action="" name="mainForm"> 
    <p>Please choose the correct answer for the question given. Do so promptly - winter is coming.</p> 
    <table> 
     <tr> 
      <td id="questionLoc"> 
      Question Location 
      </td> 
     </tr>

Javasciptドキュメント...

alert("hi"); 

var allQuestions = []; 

function question(question, choices, answer) { 
       this.question = question; 
       this.choices = choices; 
       this.answer = answer; 
} 

var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 2); 
var question2 = new question("Who is Geoffrey\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 0); 
var question3 = new question("Who is Robert\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3); 

allQuestions.push(question1, question2, question3); 

$(document).ready(function() { 
    $('#button').click(function { 
     $('R1').html("Response 1") 
    }); 

}); 

var qLoc = document.getElementById("questionLoc").innerHTML; 
qLoc = allQuestions[0].question;

警告（ "こんにちは"）の試験であり、唯一の私はjQueryのをコメントアウトしたときに表示されます。「questionLoc」テキストは、「getDocumentByID」行にもかかわらず変更されません。なぜコードが実行されないかについての考えは高く評価されます。ありがとうございました。

出典

2017-02-08 Alex

jsfiddleを指定します。 –

その他の潜在的な問題に加えて、$（ 'R1'）は有効なセレクタではありません。ドットまたはハッシュがありません。 –

あなたはJavaScriptを開発し、コンソールをチェックする必要があります。キーワードfunction後に行方不明括弧があり

$('#button').click(function {

：あなたはそれを見ている場合は、この行の構文エラーがある表示されます。そのため、alertは機能しません。このエラーが原因でスクリプトが解析されません。

は、ページ上の最初の質問を入れてjQueryの表記法に固執し、 getElementByIdネイティブに戻すしていないために：あなたがいるとき html()上 text()方法を使用することをお勧めし

$("#questionLoc").text(allQuestions[0].question);

注意プレーンテキストを置く。 HTMLタグ付きコンテンツを挿入する場合は、html()を使用する必要があります。

出典

2017-02-08 21:16:59 trincot

骨頭のように感じる... jqueryタグを完全に無視しました。私のサンプルをちょっとおしゃれにしてくれたでしょう... – Snowmonkey

var qLoc = document.getElementById("questionLoc").innerHTML; qLoc = allQuestions[0].question;

は、uはあなたが var qLocに変更する実際の文字列を格納する最初のケースで

var qLoc = document.getElementById("questionLoc"); qLoc.innerHTML = allQuestions[0].question;

ように変更する必要があります。保存したいものは要素そのものです。

出典

2017-02-08 21:02:50

'innerHTML'を使用してプレーンテキストを保存するのは良い考えではありません... – trincot

あなたは正しいです、テキストノードも使用できます。より安全。 –

まだテキストを変更していません。アラートはまだ表示されません... – Alex

最も大きな問題は、question要素を保存し、そのinnerHtml属性を設定することです。任意の回答要素と同じです。もちろん、私がデモオプション要素で答えを出したので、代わりにテキスト属性を設定する必要があります。

編集されたように、私はjQueryがこれのタグであることに気づきました。 HTML要素の編集や回答要素の反復処理にこれを使用します。

var allQuestions = []; 
 

 
function question(question, choices, answer) { 
 
    this.question = question; 
 
    this.choices = choices; 
 
    this.answer = answer; 
 
}; 
 

 
var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 2); 
 
var question2 = new question("Who is Geoffrey\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 0); 
 
var question3 = new question("Who is Robert\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3); 
 

 
allQuestions.push(question1, question2, question3); 
 

 
$(document).ready(function() { 
 
    var questionEl = $(".questionEl"); 
 
    var answerEl = $(".answerEl"); 
 
    var buttonEl = $("#beginTest"); 
 
    var selectEl = $("<select>"); 
 
    var optionEl = $("<option>"); 
 
    var questionIndex = 0; 
 
    buttonEl.on("click", function() { 
 
    nextQuestion(); 
 
    }); 
 

 
    function nextQuestion() { 
 
    questionEl.html(allQuestions[questionIndex].question); 
 
    var thisAnswerEl = selectEl.clone(); 
 
    answerEl.html(thisAnswerEl); 
 
    $.each(allQuestions[questionIndex].choices, function() { 
 
     var thisOptionEl = optionEl.clone(); 
 
     thisOptionEl.attr("value", this).text(this); 
 
     thisAnswerEl.append(thisOptionEl); 
 
    }) 
 
    buttonEl.attr("value", "Next Question"); 
 
    questionIndex++; 
 

 
    } 
 

 
});

#questionEl { 
 
    background-color: #999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <h1>Game of Thrones Trivia Quiz</h1> 
 
</header> 
 
<form action="" name="mainForm"> 
 
    <p>Please choose the correct answer for the question given. Do so promptly - winter is coming.</p> 
 
    <div class="questionEl"> 
 
    </div> 
 
    <div class="answerEl"> 
 

 
    </div> 
 
    <div class="button-container"> 
 
    <input id="beginTest" type="button" value="Begin!" /> 
 
    </div>

出典

2017-02-08 21:16:23 Snowmonkey

そして、質問配列の最後を渡すとエラーになります。このエクササイズの範囲を超えて... – Snowmonkey

JavaScriptでhtmlテキストを変更する

答えて

関連する問題