Изменение содержимого класса с помощью Javascript

Я начал читать JavaScript в W3schools и тестировать/изменять несколько вещей в примерах, которые они приводят, чтобы я мог видеть, что делает, но пока не смог определить синтаксис.

Ниже приведен оригинальный код для изменения содержимого тега p, ссылка на него.

<p id="demo">
    JavaScript can change the content of an HTML element.
</p>

<script>
function myFunction()
{
    x = document.getElementById("demo");  // Find the element
    x.innerHTML = "Hello JavaScript!";    // Change the content
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

Я хочу знать, как изменить содержимое с тем же классом, но не получилось, так как вы видите, что приведенный ниже пример не работает. Скрипка кода ниже.

<p class="demo">
    JavaScript can change the content of an HTML element.
</p>

<p class="demo">Yolo</p>

<script>
function myFunction()
{
    x = document.getElementsByClassName("demo");  // Find the element
    x.innerHTML = "Hello JavaScript!";    // Change the content
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

Если бы вы могли показать мне, как ^^ "и помочь мне понять, является ли" getElementById "переменной, которая может быть чем-то еще, или это команда?

Ответы

Ответ 1

Ваш x - массив элементов. попробуйте использовать цикл:

<body>

<p class="demo">JavaScript can change the content of an HTML element.</p>    
<p class="demo">Yolo</p>   

<button type="button" onclick="myFunction()">Click Me!</button>

<script>        
function myFunction()
{
x=document.getElementsByClassName("demo");  // Find the elements
    for(var i = 0; i < x.length; i++){
    x[i].innerText="Hello JavaScript!";    // Change the content
    }

}

</script>
</body>

См. FIDDLE

Ответ 2

Обратите внимание, как при использовании:

x=document.getElementsByClassName("demo");

Это Элементы вместо Элемента. Это связано с тем, что он возвращает массив HTMLCollection всех элементов с одним определенным именем класса. Чтобы бороться с этим, вы можете выбрать первый элемент в массиве:

x=document.getElementsByClassName("demo")[0];

Ответ 3

Легче использовать jQuery с Javascript

См. этот пример: http://jsfiddle.net/37jq9/3/

Если вы используете jquery вместо вызова

x=document.getElementsByClassName("demo");

вы можете использовать

x = $('.demo');

но вы можете просто вызвать функцию следующим образом:

$(document).ready(function(){
    $('button').click(function(){
        $('.demo').text('Hello Javascript');
    })   
})