Использование Javascript для вывода HTML не работает с неупорядоченным списком - PullRequest
Новая
       23

Использование Javascript для вывода HTML не работает с неупорядоченным списком

0 голосов
/ 17 марта 2019

Я использую JavaScript для добавления HTML в переменную, которая передается в DIV: 

var FN = 'options';
var gn = 'Bob';
var LN = 'Simpson';
var LN2 = 'Jetson';
var LN3 = 'Flintstone';
var formResult = document.getElementById("resultFinal");
var theEnd == 'yes';

Answer = "<p class='yes'>The following " + FN + " are available to the user: <ul><li>" + gn + " " + LN + "</li><li>" + gn + " " + LN2 + "</li><li>" + gn + " " + LN3 + "</li></ul><br>The following " + FN + " are available to the user: <ul><li>" + gn + " " + LN + "</li><li>" + gn + " " + LN2 + "</li><li>" + gn + " " + LN3 + "</li></ul></p>";
document.querySelector("#resultFinal").innerHTML+=Answer;

if (theEnd == 'yes') {              
    if (formResult.style.display == "none") {
        formResult.style.display = "block";
    } else {
        formResult.style.display = "none";
    }                   
}

<div id="resultFinal" style="display:none"></div>

Переменная theEnd является просто тумблером, который скрывает DIV, который содержит содержимое переменной Answer.

Вывод ответа неправильно отображается в браузере.

Если я сделаю это: 

Answer = "<p class='yes'>The following " + FN + " are available to the user:<br>The following " + FN + " are available to the user:</p>";
document.querySelector("#resultFinal").innerHTML+=Answer;

Он будет правильно отображаться как: 

<p class='yes'>The following options are available to the user:<br>The following options are available to the user:</p>

Но, используя предполагаемый код, как показано наверху, я получаю следующее: 

<p class='yes'>The following options are available to the user:</p><ul><li>Bob Simpson</li><li>Bob Jetson</li><li>Bob Flintstone</li></ul><br>The following options are available to the user:<ul><li>Bob Simpson</li><li>Bob Jetson</li><li>Bob Flintstone</li></ul><p></p>

Когда это должно быть так: 

<p class='yes'>The following options are available to the user:<ul><li>Bob Simpson</li><li>Bob Jetson</li><li>Bob Flintstone</li></ul><br>The following options are available to the user:<ul><li>Bob Simpson</li><li>Bob Jetson</li><li>Bob Flintstone</li></ul></p>

Почему это происходит и как я могу это исправить?

1 Ответ

1 голос
/ 17 марта 2019

Ну, упомянутый код работает абсолютно нормально для меня.

Вместо 

var theEnd == 'yes';

Я изменил как: 

var theEnd = 'yes';

Удалено double = и использованотолько 1 =

Пожалуйста, попробуйте использовать <div> вместо <p>, так как браузер автоматически закрывается и автоматически открывает отсутствующий начальный или конечный тег для <p>

...