Попытка вставить html-код в html, а затем после обработки удалить указанный код. Это то, что я написал, и не понимаю, почему это не сработает. Разве кавычки не должны запускать его как строку, которую нужно поместить в div-диапазон?

<div><span id="evolutionUpgrades"></span></div>

Переменная мембрана = "пузырь";

function evolutionUpgrade() {
if (membrane == "bubble") {
    if (evolution >= 1) {
        document.getElementById("evolutionUpgrades").innerHTML = 
            '<p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> <
    <p title="Your       p title = "Your first evolution.  Double wall bubbles were the first evolution of cells."><button" type="button"> onclick="doublebubble< button type = "button"
        onclick = "doublebubble()"><b>Double" Bubble<> < b > Double Bubble < /b></button><button > < /p>'
    }
} 
};

function doublebubble() {
membrane = "doublebubble"
document.getElementById('membrane').innerHTML = "Double Bubble";
}

Это должно сработать, когда переменная эволюции станет равной или большей 1, и запустить две функции if, а затем скопировать и вставить код в HTML.

К сожалению, кажется, что мой javascript игнорирует '' как строку и пытается запустить код как есть.

Как сделать так, чтобы он просто вставлялся так, чтобы, хотя операторы if были истинными, он создавал кнопку, которая выполняет функцию при нажатии и при запуске этой функции становится ложной, а затем удаляется?

Я использую неправильный флаг? Неправильная пунктуация? Что я делаю не так или не знаю? Пожалуйста, помогите исправить это. Пожалуйста, будьте подробно с вашим ответом, чтобы я мог учиться на нем. Просто исправление моего кода без объяснения причин не помогает.

Я не против, чтобы люди исправляли мои грамматические ошибки. Но, пожалуйста, не меняйте код. Мне нужно увидеть разницу между сломанным и исправленным, чтобы учиться. Особенно, когда вы нарушаете код. Мой код был правильным, за исключением исправления Джейсона В.

1
Tygari 12 Янв 2017 в 05:19

4 ответа

Лучший ответ

HTML в строках - это хорошо, но вы получаете синтаксическую ошибку, потому что вы поместили строку в несколько строк. Javascript анализирует на новой строке, если вы забыли закрыть строку и точку с запятой - как продуманно :)

Чтобы обойти это, проще всего добавить \ для экранирования символа новой строки (должен работать для всех браузеров) или использовать backtick (`) вместо одинарных кавычек (но только если поддержка ES6 только для вашего приложения ) .

    document.getElementById("evolutionUpgrades").innerHTML = 
    '<p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> \
    <p title="Your first evolution.  Double wall bubbles were the first evolution of cells."><button type="button" onclick="doublebubble()"><b>Double Bubble</b></button></p>'

* Обратите внимание на "\" после первого закрывающего тега p, чтобы экранировать новую строку в вашем HTML

0
Jason W 12 Янв 2017 в 02:25

Вместо того, чтобы вставлять HTML таким способом, включите дополнительный HTML в ваш основной файл HTML, затем включите или выключите его, добавив / удалив класс, такой как hide.

<div>
  <span id="evolutionUpgrades" class="hide">
    <p style="color:blue" title="Choose your evolution carefully.">Evolutions</p>
    <p title="Your first evolution.  Double wall bubbles were the first evolution of cells.">
     <button type="button" onclick="doublebubble()"><b>Double Bubble</b></button>
    </p>
  </span>
</div>
var membrane = "bubble";

function evolutionUpgrade(){
  if (membrane == "bubble") {
    if (evolution >= 1) 
      document.getElementById("evolutionUpgrades").classList.remove("hide");
  }
}

function doublebubble() {
  membrane = "doublebubble";
  document.getElementById('membrane').innerHTML = "Double Bubble";
}
.hide { display: none; }

В целом, лучше не рассматривать HTML как огромные строки, которые вставляются или удаляются из DOM. Как вы обнаружили, у вас возникнут проблемы с цитированием и переводом строк. Это также затрудняет чтение вашего кода. Пусть HTML будет HTML, а JS будет JS.

0
12 Янв 2017 в 03:18

Добавьте к тому, что сказал @Jason.

Просто мои два цента.

0
Community 23 Май 2017 в 12:24

Если вы используете jQuery, вы также можете использовать метод .append ()

$('#evolutionUpgrades').append(`
    <p style="color:blue" title="Choose your evolution carefully.">Evolutions</p>
    <p title="Your first evolution.  Double wall bubbles were the first evolution of cells."><button type="button" onclick="doublebubble()"><b>Double Bubble</b></button></p>
`)
-1
Chris 12 Янв 2017 в 02:45