在Javascript中將變量傳遞到DOM函數中

我從w3schools中摘取了此示例並將其修改爲此。下面的代碼不起作用。在Javascript中將變量傳遞到DOM函數中

我打算做的是隱藏ID爲「demo1」的div。它不工作。問題是什麼？

<!DOCTYPE html> 
<html> 

<head> 
    <script> 
     function myFunction(div_id) 
     { 
      //here the div_id variable seems to unparsable by the DOM event 
      document.getElementById(div_id).innerHTML = hello; 
     } 
    </script> 
</head> 


<body> 

    <p>Click the button to trigger a function.</p> 

    <button onclick="myFunction('demo1')">Click me</button> 

    <div id="demo1"></div> 
    <div id="demo2"></div> 

</body> 
</html>

來源

2013-07-16 user1535147

呃，你在編輯顯著改變你的代碼？這是...不是超級有用。使現有的答案看起來有點奇怪。 –

從'.innerhtml'到'.style'。這很重要嗎？ – user1535147

是的。相信與否，他們完全不同的事情。我*想*這就是爲什麼他們被賦予完全不同的名字。 –

未定義變量hello。你可能正在尋找設置innerHTML爲String：

function myFunction(div_id) { 
    document.getElementById(div_id).innerHTML = "hello"; 
    // -----------------------------------------^-----^ 
}

DEMO：http://jsfiddle.net/uzuKp/1/

即使你從W3Schools的花了一個例子，修改了它，我建議結合事件從HTML代碼中分離並將相關數據存儲在data-*屬性中。在您的例子，它可以是這樣的：

<p>Click the button to trigger a function.</p> 

<button data-div-id="demo1">Click me</button> 
<button data-div-id="demo2">Click me</button> 
<button data-div-id="demo1">Click me</button> 

<div id="demo1">demo1</div> 
<div id="demo2">demo2</div>

而且JS：

function clickHandler() { 
    var targetDivId, targetDiv; 
    targetDivId = this.getAttribute("data-div-id"); 
    targetDiv = document.getElementById(targetDivId); 
    targetDiv.innerHTML = "Hello" + new Date().getTime(); 
} 

function loadHandler() { 
    var buttons, i, j, cur; 
    buttons = document.getElementsByTagName("button"); 
    for (i = 0, j = buttons.length; i < j; i++) { 
     cur = buttons[i]; 
     cur.onclick = clickHandler; 
    } 
} 

window.onload = loadHandler;

DEMO：http://jsfiddle.net/3K4RD/

雖然我也建議看下面的文章，以看到不同的方式來綁定事件：addEventListener vs onclick

我最後的建議是不設置噸他innerHTML財產。這裏可能有一個簡單的示例，但使用DOM方法（如appendChild（添加節點）和document.createTextNode（創建可添加的文本））通常更好。當然，這需要首先被清理掉的內容，是這樣的：

while (targetDiv.firstChild) { 
    targetDiv.removeChild(targetDiv.firstChild); 
} 
targetDiv.appendChild(document.createTextNode("Hello"));

DEMO：http://jsfiddle.net/52Kwe/

您還可以存儲需要被設置爲innerHTML作爲一個特定的字符串data-*屬性（特別是如果按鈕不同）。

UPDATE：

根據您最近編輯的style屬性是一個特殊的屬性，這實際上是與你需要設置樣式屬性的特殊對象。因此，對於你的榜樣，你必須設置.style.display值，如：

document.getElementById(div_id).style.display = "none";

來源

2013-07-16 16:34:38 Ian

感謝您對內聯JS事件的詛咒引入一些理智:-) –

感謝您的幫助，並對由此帶來的不便深表歉意。我有一個問題，但w3schools使它看起來很容易。爲什麼我必須通過麻煩來綁定事件？有什麼優勢？ – user1535147

@ user1535147：「w3schools使它看起來很容易」[w3schools不好]（http://www.w3fools.com/）。 –

document.getElementById(div_id).style.display = 'none'; 
document.getElementById(div_id).style.visibility= 'hidden';

來源

2013-07-16 16:57:38 rps

在Javascript中將變量傳遞到DOM函數中

回答

相關問題