使用 JavaScript 更改 html 文本答案

【问题标题】：Change html text with JavaScript使用 JavaScript 更改 html 文本
【发布时间】：2017-02-08 20:59:54
【问题描述】：

我正在尝试将表元素 id="questionLoc" 的值更改为我放置在数组中的问题。下面的 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;

alert("hi") 是一个测试，只有在我注释掉我的 jQuery 时才会出现。尽管有 'getDocumentByID' 行，但“questionLoc”文本不会改变。任何关于为什么代码不执行的想法将不胜感激！谢谢。

【问题讨论】：

提供jsfiddle。
除了其他潜在问题之外，$('R1') 不太可能是一个有效的选择器。缺少点或哈希。

标签： javascript jquery html dom text

【解决方案1】：

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

应该改成

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

在第一种情况下，您存储要更改的实际字符串 var qLoc。您要存储的是元素本身。

【讨论】：

你说得对，也可以使用文本节点。更安全。
嗯仍然没有更改文本。警报仍然没有出现...

【解决方案2】：

您应该在开发 JavaScript 时检查控制台。如果你看一下，你会发现这一行有语法错误：

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

关键字function 后面缺少括号。这就是alert 不起作用的原因——由于这个错误，您的脚本无法解析。

要将第一个问题放在页面上，请坚持使用 jQuery 表示法，不要还原为原生 getElementById：

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

请注意，当您输入纯文本时，最好使用text() 方法而不是html()。 html() 应在插入 HTML 标记内容时使用。

【讨论】：

感觉像个傻瓜......完全无视jquery标签。会让我的样本更整洁...

【解决方案3】：

最大的问题是你要保存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>

【讨论】：

是的，当你通过问题数组的末尾时它会出错。超出本练习的范围...