How to fix displaying html symbols

Question

I want to build a quiz and I have problem with displaying HTML symbols. For example instead of " it shows " Here is whole code: https://codepen.io/mixereq/pen/GVdoWV

const result = JSON.parse(xhr.response);
for(let i=0; i<result.results.length; i++) {
    let categoryElement = document.createElement('div');
    let questionElement = document.createElement('div');
    let answersElement = document.createElement('div');

    categoryElement.className = 'category';
    questionElement.className = 'question';
    answersElement.className = 'answers';

    categoryElement.innerText = result.results[i].category;
    questionElement.innerText = result.results[i].question;
    if(result.results[i].correct_answer == 'True') {
        answersElement.innerText = result.results[i].correct_answer + result.results[i].incorrect_answers[0];
    } else {
        answersElement.innerText = result.results[i].incorrect_answers[0] + result.results[i].correct_answer;
    }

    container.appendChild(categoryElement);
    container.appendChild(questionElement);
    container.appendChild(answersElement);
}

score 1 · Accepted Answer · answered Aug 08 '19 at 16:36

use innerHTML instead of innerText to set your content. Then the browser will interpret the value as HTML and not plain text, and will parse and render it, instead of just displaying it verbatim.

Of course when displaying HTML from a 3rd-party API this should be used with caution - be aware of the risk of things like script injection.

score 1 · Answer 2 · answered Aug 08 '19 at 16:37

Use innerHTML instead of innerText:

const result = JSON.parse(xhr.response);
for(let i=0; i<result.results.length; i++) {
    let categoryElement = document.createElement('div');
    let questionElement = document.createElement('div');
    let answersElement = document.createElement('div');

    categoryElement.className = 'category';
    questionElement.className = 'question';
    answersElement.className = 'answers';

    categoryElement.innerHTML = result.results[i].category;
    questionElement.innerHTML = result.results[i].question;
    if(result.results[i].correct_answer == 'True') {
        answersElement.innerHTML = result.results[i].correct_answer + result.results[i].incorrect_answers[0];
    } else {
        answersElement.innerHTML = result.results[i].incorrect_answers[0] + result.results[i].correct_answer;
    }

    container.appendChild(categoryElement);
    container.appendChild(questionElement);
    container.appendChild(answersElement);
 }

More info: Difference between innerText and innerHTML

score 0 · Answer 3 · answered Aug 08 '19 at 16:37

0

Try to change your innerText for innerHTML .

innerText just put plain text ignoring special characters.

categoryElement.innerText = result.results[i].category;

for

categoryElement.innerHTML = result.results[i].category;

answered Aug 08 '19 at 16:37

Oscar Caldeira

119
1
5

score 0 · Answer 4 · answered Aug 08 '19 at 16:42

0

Answer, that you got from backend is wrong - contains unwanted ". Dirty method to fix this, is replacing with regex.

questionElement.innerText = result.results[i].question.replace(/&quot;/g, '"');

answered Aug 08 '19 at 16:42

Kamil Naja

6,267
6
33
47

How to fix displaying html symbols

4 Answers4