Ändern Sie HTML-Text mit JavaScript

-1

Ich versuche, den Wert von Tabellenelement id = "questionLoc" zu einer Frage zu ändern, die ich in einem Array platziert habe. HTML unten ...Ändern Sie HTML-Text mit JavaScript

<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 Dokument ...

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;

Die alert ("Hallo") ist ein Test, und erscheint nur, wenn ich meine jQuery Kommentar aus. Der Text "questionLoc" ändert sich trotz der Zeile "getDocumentByID" nicht. Irgendwelche Gedanken darüber, warum der Code nicht ausgeführt wird, würden geschätzt werden! Vielen Dank.

Quelle

2017-02-08 Alex

Stellen Sie jsfiddle. –

Zusätzlich zu anderen möglichen Problemen ist $ ('R1') wahrscheinlich kein gültiger Selektor. Ein Punkt oder Hash fehlt. –

sollten Sie die Konsole überprüfen, wenn Sie JavaScript entwickeln. Wenn Sie es betrachten, sehen Sie, es in dieser Zeile ein Syntaxfehler ist:

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

Es fehlen Klammern nach dem Schlüsselwort function. Deshalb funktioniert die alert nicht - Ihr Skript wird wegen dieses Fehlers nicht analysiert.

Um die erste Frage auf der Seite, halten Sie sich an jQuery Notation zu setzen, und kehrt nicht zurück auf die native getElementById:

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

Beachten Sie, dass besser ist, die text() Methode über html() zu verwenden, wenn Sie Klartext einfügen. html() sollte verwendet werden, wenn Sie HTML-markierten Inhalt einfügen.

Quelle

2017-02-08 21:16:59 trincot

Fühlen Sie sich wie ein Dummkopf ... völlig ignoriert das Jquery-Tag. hätte meine Probe etwas aufgeräumter gemacht ... – Snowmonkey

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

Sollte

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

Im ersten Fall als

geändert werden u die tatsächliche Zeichenfolge speichern, die Sie in var qLoc ändern möchten. Die Sache, die Sie speichern möchten, ist das Element selbst.

Quelle

2017-02-08 21:02:50

Verwenden von 'innerHTML', um Klartext zu speichern, ist nicht die beste Idee ... – trincot

Sie haben Recht, ein Textknoten kann auch verwendet werden. Mehr sicher. –

hmmm immer noch nicht den Text ändern. Die Warnung wird immer noch nicht angezeigt ... – Alex

Das größte Problem ist, dass Sie das Frageelement speichern und dann sein InnerHtml-Attribut festlegen möchten. Gleiches gilt für jedes Antwortelement. Natürlich, wie ich die Antworten in meinen Demo-Optionselementen gemacht habe, müssen Sie stattdessen ihr Textattribut setzen.

Bearbeitet, als ich erkannte, dass jQuery ein Tag in diesem war. Dies wird nun zum Bearbeiten von HTML-Elementen und zum Iterieren von Antwortelementen verwendet.

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>

Quelle

2017-02-08 21:16:23 Snowmonkey

Und ja, es wird ein Fehler ausgegeben, wenn Sie das Ende des Frage-Arrays übergeben. Jenseits des Rahmens dieser Übung ... – Snowmonkey

Ändern Sie HTML-Text mit JavaScript

Antwort

Verwandte Themen