Trying to set my lis' on seperate lines in the foreach but it aint working-CodePudding

Inside the event listener, I want my li's in the foreach to be no separate lines. It is actually a huge code but is having a problem on this line.

Trying to change questions on click on the answers which are in the list. The questions and answers are in an array of objects. It is a coding quiz.

This li is dynamically created in the script as you can see.

function presentQuestions() {

    interval = setInterval(function () {
        timeCounter  ;
        timeEl.textContent = timeCounter;
       
    }, 1000)
    askNow.innerHTML = " ";
    ansList.innerHTML = " ";
    for (var i = 0; i < questions.length; i  ){
        
        var displayQuestion = questions[changeQuestion].title;
        var displayListQues = questions[changeQuestion].choices;
        askNow.innerHTML = displayQuestion;
    }
    displayListQues.forEach(function (domanda) {
        // setId  ;
        var li = document.createElement('li');
        li.setAttribute('id', setId  );
        li.textContent  = domanda;
        ansList.append(li);

        li.addEventListener('click', function (e) {
            e.preventDefault();
            askNow.innerHTML = " ";
            ansList.innerHTML = " ";
            changeQuestion  ;
            displayQuestion = questions[changeQuestion].title;
            displayListQues = questions[changeQuestion].choices;
            displayListQues.forEach(function (ques) {
                    
                li.textContent  = ques   "\n"; // Trying to set them on separate lines as online as this li.textContent  = domanda but it ain't working.
                 
            })
            askNow.textContent = displayQuestion;
            ansList.append(li)
        })
    })
}

CodePudding user response：

You should add the question text <br> to innerHTML, in order to achieve the desired effect.

Demo:

const li1 = document.getElementById("li1")
const li2 = document.getElementById("li2")
const ques = "xyz"

function addText1() {
  li1.textContent  = ques   "\n";
}

function addText2() {
  li2.innerHTML  = ques   "<br />";
}

<button onClick="addText1()">add to 1st using textContent and \n</button><br />
<button onClick="addText2()">add to 2nd using innerHTML and br tag</button>

<ul>
  <li id="li1"></li>
  <li id="li2"></li>
</ul>

In the special case that ques contains actual HTML (or any characters with a special meaning in HTML, such as &) that need to be displayed literally, you'll need to use a htmlEncode function, as follows.

Demo 2:

const li1 = document.getElementById("li1")
const li2 = document.getElementById("li2")
const ques = "xyz<a>pqr"

function addText1() {
  li1.textContent  = ques   "\n";
}

function addText2() {
  li2.innerHTML  = htmlEncode(ques)   "<br />";
}

function htmlEncode(input) {
  const textArea = document.createElement("textarea");
  textArea.innerText = input;
  return textArea.innerHTML.split("<br>").join("\n");
}

<button onClick="addText1()">add to 1st using textContent and \n</button><br />
<button onClick="addText2()">add to 2nd using innerHTML and htmlEncode and br tag</button>

<ul>
  <li id="li1"></li>
  <li id="li2"></li>
</ul>

CodePudding user response：

This is difficult to grok but it looks to me like you are trying to get CRLF in HTML by adding newlines (i.e. "\n") to the textContext property of an li element.

I believe newlines and other whitespace in HTML do not work outside of <pre> tags and maybe some other new HTML5 ones, not sure. You could probably achieve what you are trying to do with a <br> tag, but you need to use HTML methods such as document.createElement('br') or else something like element.innerHTML = '<br>'