使用Javascript更改类的内容

我开始在W3schools中阅读JavaScript并在他们给出的示例中测试/更改了一些内容，以便我可以看到什么在做什么但尚未设法识别语法。以下是更改p标签内容的原始代码，link。使用Javascript更改类的内容

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

我想知道如何更改内容相同类别，但失败了，你可以看到下面的例子中不起作用。 Fiddle of code below。

<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’一个变量，它可以是任何东西或者是一个命令

来源

2014-02-16 Harlequin

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

来源

2014-02-16 15:33:56 melvas

在小提琴中，你有一个额外的行“console.log（x）”D ::它是什么？ – Harlequin

请参阅此链接以查找答案：https：//developers.google.com/chrome-developer-tools/docs/console-api – melvas

它只是在控制台中显示一条消息。 – melvas

注意如何当你使用：

x=document.getElementsByClassName("demo");

这是元素，而不是元素，这是因为它返回~~一个数组~~都与一个特定的类名的元素的HTMLCollection。为了解决这个问题，你可以在阵列中选择的第一要素：

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

来源

2014-02-16 15:26:45 Anonymous

我看了你的答案就像4次，然后我明白了阵列啄！（我有一个来自Pascal的数组的想法）。测试它并且工作，[0]改变了第一个文本，[1]改变了第二个。谢谢！钍循环thingy是我的意图 – Harlequin

不客气。对不起，如果我的答案令人困惑。 – Anonymous

这是比较容易使用jQuery的JavaScript

见下面的例子：如果你使用电话

x=document.getElementsByClassName("demo");

的jQuery的，而不是你可以使用

http://jsfiddle.net/37jq9/3/

x = $('.demo');

，但你可以这样调用该函数：

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

来源

2014-02-16 15:33:11

“我开始在W3schools阅读JavaScript” - Harlequin应该首先学习JavaScript。 – melvas

“*更容易使用jQuery与Java *”？ - 什么？ Java！= JavaScript，理想的情况是在开发依赖任何库之前学习JavaScript。 –

雅我以为我会先学习JavaScript然后JQuery！ – Harlequin

使用Javascript更改类的内容

回答

相关问题