Изменение содержимого класса с помощью 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 " переменной, которая может быть чем-то другим или это команда?

11
html javascript onclick tags

3 ответов

ваш X - это массив элементов. попробуйте использовать loop:

<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>

посмотреть скрипка

18

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

x=document.getElementsByClassName("demo");

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

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

проще использовать jQuery с Javascript

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

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

x=document.getElementsByClassName("demo");

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

x = $('.demo');

но вы можете просто вызвать функцию, как это:

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