2014-09-21 34 views
-2

好的,所以我對JavaScript很新,可能不知道我做錯了什麼,所以我需要幫助糾正我所做的任何錯誤。我的目標是製作一個標題,並帶有2個按鈕的句子。一個按鈕應該改變句子的文本,另一個改變標題的文本。新的JavaScript,需要更正:使2個按鈕更改2個不同的文本

這裏是我的想法:我命名的功能標題和句子(如果我做對了),所以當我點擊按鈕執行該命令點擊時,它的確如此。 (顯然)所以像onclick =「title()」我的意思是當你點擊那個按鈕時,它會運行代碼來改變標題,反之亦然。當我打開它時,我最終得到的是2個按鈕,一個句子和一個標題。我點擊按鈕,沒有任何反應。所以我的問題是;我如何使2個按鈕改變2個不同的實體。一個改變標題,一個改變句子。謝謝!

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function Title() { 
document.getElementById=("demo").innerHTML = "Title Changed" 
} 
function Sentence() { 
    document.getElementById=("demo").innerHTML = "Sentence Changed" 
} 
</script> 
</head> 

<body> 

<h1 id="demo">The Title</h1> 

<p1 id="demo">The Sentence</p1> 

<button type="button" onclick="Title()">Title Button</button> 

<button type="button" onclick="Sentence()">Sentence Button</button> 

</body> 
</html> 
+2

的ID必須是唯一的 - 非唯一ID的瀏覽器行爲在技術上是不確定的。您將不得不爲您的H1和段落元素使用不同的ID。 – Terry 2014-09-21 19:03:28

回答

0

你的代碼是大多數的方式出現,但你要明白,在HTML中的id屬性就像是一個街道地址:它沒有任何意義,得到兩種不同的建築物完全相同的地址。因此,頁面上每個id屬性的值應該是唯一的。

另外,在HTML5中沒有像p1這樣的標籤,所以您應該將其更改爲標準段落元素p

最後,getElementById是一個函數調用,所以在函數名稱和它的參數("title")之間沒有=,所以需要刪除等號。

相結合,你的代碼應該是這樣的:

<h1 id="title">The Title</h1> 
<p id="sentence">The Sentence</p> 

這:

function Title() { 
    document.getElementById("title").innerHTML = "Title Changed"; 
} 
function Sentence() { 
    document.getElementById("sentence").innerHTML = "Sentence Changed"; 
} 

你的JavaScript然後應該瞄準正確的元素,你應該看到的內容改變時,每個按鈕。

0

ID在html頁面上應該是唯一的。代碼更正根據自己的需要:

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function Title() { 
document.getElementById("demo").innerHTML = "Title Changed"; 
} 
function Sentence() { 
    document.getElementById("sentence").innerHTML = "Sentence Changed"; 
} 
</script> 
</head> 

<body> 

<h1 id="demo">The Title</h1> 

<p1 id="sentence">The Sentence</p1> 

<button type="button" onclick="Title()">Title Button</button> 

<button type="button" onclick="Sentence()">Sentence Button</button> 

</body> 
</html> 
1
  • ID應該是唯一的(對標題和句子使用不同的ID)。

  • document.getElementById=("demo")只是錯誤的語法...應該沒有賦值運算符之間。

  • 有沒有這樣的標籤p1

function Title() { 
 
document.getElementById("title").innerHTML = "Title Changed"; 
 
} 
 
function Sentence() { 
 
    document.getElementById("sentence").innerHTML = "Sentence Changed"; 
 
}
<h1 id="title">The Title</h1> 
 

 
<p id="sentence">The Sentence</p> 
 

 
<button type="button" onclick="Title()">Title Button</button> 
 

 
<button type="button" onclick="Sentence()">Sentence Button</button>