Question

我正在尝试遍历一个对象数组，并在某些输入字段中在屏幕上动态显示结果在我创建一个文本节点放入输入标签之前，似乎进展顺利。它将创建节点，控制台和元素选项卡可识别文本节点，但它不会显示在屏幕上。我还得到了一个带有未定义文本的额外输入。任何帮助都将不胜感激！

create procedure getID(@value1 int, @value2 int, @id int OUT) as

if exists(select id from idval1val2 where value1=@value1 and value2=@value2)
begin
    select @id=id from idval1val2 where value1=@value1 and value2=@value2
end
 else 
begin
   insert into idval1val2(value1,value2) values(@value1,@value2)
   set @id=SCOPE_IDENTITY()
end
 go

var questions = [

  {
    one: "In which HTML element do we put in Javascript code?",
    choices1: ['<js>', '<script>', '<body>', '<link>']
  },
  {
    2: 'Which HTML attribute is used to reference an external Javascript file?',
    choices2: ['src', 'rel', 'type', 'href']
  },
  {
    3: 'How would you write "Hello" in an alert box?',
    choices3: ['msg("Hello")', 'alertBox("Hello")', 'document.write("Hello")', 'alert("Hello")']
  },
  {
    4: 'Javascript is directly related the the "Java" programming language',
    choices4: ['true', 'false']
  },
  {
    5: "A variable in Javascript must start with which special character",
    choices5: ['@', '$', '#', 'No Special Character']
  }

]

var h3Q1 = document.querySelector('.q1');

h3Q1.innerHTML = questions[0].one;
var br = '<br>';


var form = document.querySelector('[name=quizForm]');

for (var i = 0; i <= questions[0].choices1.length; i++) {
  var input = document.createElement('input');
  var textNode = document.createTextNode(questions[0].choices1[i]);
  input.type = 'radio';
  input.name = 'q1';
  input.value = 'a';
  input.id = 'q1a';
  input.appendChild(textNode);
  form.insertBefore(input, form[0]);
  input.insertAdjacentHTML('afterend', br);

}

Answer 1

您无法向输入元素添加textNode（或任何其他重要的HTML）。最好的办法是使用标签并将输入和textnode放在其中。当您单击文本时，它具有选择输入的附加好处。

＆＃13;

var questions = [

  {
    one: "In which HTML element do we put in Javascript code?",
    choices1: ['<js>', '<script>', '<body>', '<link>']
  },
  {
    2: 'Which HTML attribute is used to reference an external Javascript file?',
    choices2: ['src', 'rel', 'type', 'href']
  },
  {
    3: 'How would you write "Hello" in an alert box?',
    choices3: ['msg("Hello")', 'alertBox("Hello")', 'document.write("Hello")', 'alert("Hello")']
  },
  {
    4: 'Javascript is directly related the the "Java" programming language',
    choices4: ['true', 'false']
  },
  {
    5: "A variable in Javascript must start with which special character",
    choices5: ['@', '$', '#', 'No Special Character']
  }

]

var h3Q1 = document.querySelector('.q1');

h3Q1.innerHTML = questions[0].one;
var br = '<br>';


var form = document.querySelector('[name=quizForm]'),
    button = form.querySelector('.submit');

for (var i = 0; i <= questions[0].choices1.length; i++) {
  var input = document.createElement('input');
  var label = document.createElement('label');
  var textNode = document.createTextNode(questions[0].choices1[i]);
  input.type = 'radio';
  input.name = 'q1';
  input.value = 'a';
  input.id = 'q1a';
  label.append(input);
  label.appendChild(textNode);  
  form.insertBefore(label, button);
  label.insertAdjacentHTML('afterend', br);

}

＆＃13;

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Javascript Quiz</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
  <div id="container">
    <header>
      <h1>Simple Javascript Quiz</h1>
      <p>Test your knowledge in <strong>Javascript fundamentals</strong></p>
    </header>
    <section>
      <div id="results"></div>

      <form name="quizForm" onsubmit="return submitAnswers()">
        <h3 class="q1"></h3>

        <input type="submit" class="submit" value="Submit Answers">



      </form>
    </section>
  </div>



  <script src="js/scripts.js"></script>
</body>

</html>

＆＃13;

文本节点未显示在屏幕上

1 个答案: