Передача переменной в функцию DOM в Javascript

Я взял этот пример с w3schools и изменил его на это. Код ниже не работает.Передача переменной в функцию DOM в Javascript

Что я намерен делать, это скрыть div с идентификатором «demo1». Это не работает. В чем проблема?

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

Одно последнее предложение, которое у меня есть: не устанавливать t он 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

Передача переменной в функцию DOM в Javascript

ответ

Смежные вопросы