使用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更改類的內容

回答

相關問題