Почему я теряю форматирование после запуска javascript?

Это, наверное, глупый вопрос, но почему я теряю все форматирование при запуске функции test()? Что я должен изменить в своем коде? Я был бы очень признателен за вашу помощь!Почему я теряю форматирование после запуска javascript?

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
    body { 
     background: #E6E6FA; 
     font-family: book antiqua; 
    } 
    h1, h2 { 
     color: grey; 
    } 
</style> 

</head> 
<h3>Title</h3> 
<body bgcolor="#E6E6FA"> 
    <input type="text" id="userInput"></input> 
    <button onclick="test()">Submit</button> 
    <p id="Demo"></p> 
    <p id="Beg"></p> 
    <p id="Fin"></p> 
    <script> 
     function test() 
     { 
      var nam= document.getElementById("userInput").value; 
      var l = nam.length; 
      var pocz = nam.slice(0,1); 
      var kon = nam.slice(-1); 
      document.getElementById("Demo").innerHTML = document.write("Your secret code: " + l + pocz + kon); 
      var one = nam.slice(-1) 
      if (one == "a") { 
       document.write(nam.slice(0,-1) + "bbb"); 
      } else { 
       document.write(nam + "ccc"); 
      }   


     } 
    </script> 
</body> 
</html>

источник

2014-12-12 JavaScript

Если document.write называется после загрузки DOM, он заменяет документ. Также вы используете document.write неправильно, он ничего не возвращает. Просто опустите его, и он будет работать нормально.

document.getElementById("Demo").innerHTML = "Your secret code: " + l + pocz + kon;

Для других целей, сделать то же самое и присвоить значение элементу с помощью innerHTML.

Прежде чем использовать незнакомую функцию, прочитайте documentation.

источник

2014-12-12 17:19:23

Спасибо, но после введения ваших изменений сценария перестал работать полностью. Я не знаю, что я делаю неправильно в этом случае, но кажется, что что-то не так! – JavaScript

Прекрасно работает для меня: http://jsfiddle.net/83s60b00/. Наверное, ты сделал что-то не так. –

Спасибо большое! Я, должно быть, сделал что-то не так, но теперь это работает! Я подумал, что вы должны использовать document.write в этом случае, спасибо за объяснение этого! Проголосует, но моя «репутация» слишком низкая! (вчера начал изучать js). Еще раз спасибо! – JavaScript

Никогда не использовать document.write. Когда-либо. Просто не используйте его. Он полностью устарел.

Ответ Felix Kling будет работать для первой части, так как вы напрямую привязываете элемент html к элементу. но более поздние вызовы добавляют к документу больше контента, не заменяя контент, поэтому вы должны добавить в документ новый контент или сделать другой заполнитель (например, демонстрационную версию). вот как сделать это с добавлением нового контента:

function test() 
    { 
     var nam= document.getElementById("userInput").value; 
     var l = nam.length; 
     var pocz = nam.slice(0,1); 
     var kon = nam.slice(-1); 
     document.getElementById("Demo").innerHTML = "Your secret code: " + l + pocz + kon; 
      var one = nam.slice(-1); 
      if (document.getElementsByClassName("spantext").length===0) 
      { 
      var text=document.createElement("span"); 
    text.setAttribute("class","spantext"); 
      document.getElementsByTagName("body")[0].appendChild(text); 
      } 
      else { 
      var text=document.getElementsByClassName("spantext")[0]; 
      } 

      if (one == "a") { 
       text.innerHTML=nam.slice(0,-1) + "bbb"; 
      } else { 
       text.innerHTML=nam + "ccc"; 
      }  

    }

fiddle

источник

2014-12-12 17:45:29 chiliNUT

Спасибо, chiliNUT! Я попробовал добавить еще один заполнитель, который работает, но выглядит уродливым (он разбивает текст на два абзаца). Я определенно буду экспериментировать с добавлением нового контента! – JavaScript

Кстати, я просто играю с вашим кодом, но кажется, что я должен что-то добавить перед тегом

Почему я теряю форматирование после запуска javascript?

ответ

Смежные вопросы