document.getElementById()

-4

Я использую компилятор JavaScript w3school.com для тестирования основных программ по мере изучения JavaScript.document.getElementById()

Первое, что я заметил, в следующем фрагменте кода:

<!DOCTYPE html> 

<html> 
<body> 

<h1>My First Web Page</h1>  
<p>My first paragraph</p>  
<p id = "demo"></p>  

<script> 

var x = 4; 
var y = 8; 
var z = x + y; 
var car = "Fiat"; 

document.getElementById("demo").innerHTML = z; 
//document.getElementById("demo").innerHTML = car; 

</script> 

</body> 
</html>

Когда я раскомментировать второй document.getElementById первый (12) больше не отображается; то есть только Fiat. Почему это? Как просто отображать более одного содержимого переменной?

источник

2016-06-09 Joshua

Оба оператора изменяют содержимое одного и того же элемента, поэтому, если вы запустите оба оператора, второй будет перезаписывать изменения, сделанные первым. – Tex

Никогда не слышал о компиляторе «w3school.com Javascript» перед этим lol: p – Gogol

Настоящие прогмамеры остаются вне w3schools, используя консоль браузера, как вы должны – rojobo

Вы обновляете свойство элемента, которое удаляет существующее содержимое html с новым содержимым html. innerHTML.

Удаляет все дочерний элемент, анализирует строку содержимого и присваивает полученные узлы в качестве потомков элемента. (Taken from here)

Затем вы можете объединить несколько строки с помощью простой конкатенации

document.getElementById("demo").innerHTML = z + '<br/>' + car;

или

document.getElementById("demo").innerHTML = z; 
document.getElementById("demo").innerHTML += '<br/>' + car;

FYI: Обновление innerHTML свойства не является хорошей идея использовать, поскольку он будет восстанавливать все элементы HTML, и он будет удалять все подключенные обработчик событий к внутренним элементам. Поэтому будьте осторожны при использовании.

источник

2016-06-09 11:24:34

С опцией ''
"' время от времени, чтобы сделать его доступным для чтения. –

Вы также можете отказаться от '/' тоже, особенно потому, что OP явно использует HTML5 doctype - '
' просто отлично :) –

Можем ли мы не научить новичков использовать '.innerHTML + =" ... "'? Конечно, это безобидно здесь, но они в конечном итоге используют его повсюду. В этом нет необходимости. –

Когда я раскомментировать вторую document.getElementById первый (12) больше не отображается

Это потому, что вы перезаписать содержимое элемента с идентификатором demo в вашей несметная линия. Вы должны либо использовать два различных элемента, чтобы показать различное содержание или добавить содержимое в тот же элемент с помощью +

Либо сделать:

document.getElementById("demo1").innerHTML = z; 
document.getElementById("demo2").innerHTML = car;

или следовать тому, что предложил Pranav.

источник

2016-06-09 11:31:31

Большое спасибо за объяснение поведения, которое меня озадачило. – Joshua

Счастливые помочь. :) –

document.getElementById()

ответ

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