如何将一行文本放在对象数组的新行上，使问题更清晰?

Question

问题属于问题的键值对。目前我正试图把逗号，我试过，但我认为我100%肯定这不会工作。

question.js

var questions = [{
"question": "What order will the logs get printed? - JS Runtime in browser setTimeout(()=> {console.log('a')}, 100)<br />setTimeout(()=> {console.log('b')}, 0)nPromise.resolve('c').then(console.log)nconsole.log('d')",
"option1": "d, c, b, a",
"option2": "d, b, c, a",
"option3": "a, b, c, d",
"option4": "d, a, b, c",
"answer": "option1"}];

index . html

<div id="quizContainer" class="container">
<div class="title">Computer Quiz</div>
<div id="question" class="question"></div>
<label class="option"><input type="radio" name="option" value="1" /> <span id="opt1"></span></label>
<label class="option"><input type="radio" name="option" value="2" /> <span id="opt2"></span></label>
<label class="option"><input type="radio" name="option" value="3" /> <span id="opt3"></span></label>
<label class="option"><input type="radio" name="option" value="4" /> <span id="opt4"></span></label>
<button id="nextButton" class="next-btn" onclick="loadNextQuestion();">Next Question</button>
</div>
<div id="result" class="container result"></div>

<script src="question.js"></script>
<script src="quiz-script.js"></script>

Answer 1

var questions = [{
"question": "1 - What order will the logs get printed? - JS Runtime in browser setTimeout(()=> {console.log('a')}, 100)nsetTimeout(()=> {console.log('b')}, 0)nPromise.resolve('c').then(console.log)nconsole.log('d')",
"option1": "Abacus",
"option2": "Analytical Engine",
"option3": "Calculator",
"option4": "Processor",
"answer": "2"
}]
console.log(questions[0].question)

新行字符为n

如果您需要输出到DOM而不是控制台，则此代码可以工作:

var questions = [{
"question": "1 - What order will the logs get printed? - JS Runtime in browser setTimeout(()=> {console.log('a')}, 100)<br />setTimeout(()=> {console.log('b')}, 0)<br />Promise.resolve('c').then(console.log)<br />console.log('d')",
"option1": "Abacus",
"option2": "Analytical Engine",
"option3": "Calculator",
"option4": "Processor",
"answer": "2"
}]
document.querySelector('#result').innerHTML = questions[0].question

Answer 2

要在文档中打印字符串，请使用.innerHTML。对于新行，在字符串中添加一些<br/>。

也……要显示一些代码，您可以使用<pre>，它将默认使用monospace字体族显示文本。

var questions = [{
"question": "1 - What order will the logs get printed? - JS Runtime in browser<br/><br/><pre>setTimeout(()=> {console.log('a')}, 100)<br/>setTimeout(()=> {console.log('b')}, 0)<br/>Promise.resolve('c').then(console.log)<br/>console.log('d')</pre>",
"option1": "Abacus",
"option2": "Analytical Engine",
"option3": "Calculator",
"option4": "Processor",
"answer": "2"
}];
document.querySelector("#question").innerHTML = questions[0].question

#question {
padding: 1em;
}
#question pre {
color: white;
background: black;
padding: 0.5em;
}

<div id="quizContainer" class="container">
<div class="title">Computer Quiz</div>
<div id="question" class="question"></div>
<label class="option"><input type="radio" name="option" value="1" /> <span id="opt1"></span></label>
<label class="option"><input type="radio" name="option" value="2" /> <span id="opt2"></span></label>
<label class="option"><input type="radio" name="option" value="3" /> <span id="opt3"></span></label>
<label class="option"><input type="radio" name="option" value="4" /> <span id="opt4"></span></label>
<button id="nextButton" class="next-btn" onclick="loadNextQuestion();">Next Question</button>
</div>
<div id="result" class="container result" style="display:none;">
</div>
<script src="question.js"></script>
<script src="quiz-script.js"></script>