“的document.getElementById”是不是为我工作

我在页面“的document.getElementById”是不是为我工作

<button onclick="document.getElementById('donation').style.visibility='visible'">Support</button>

，我想有链接到制作一个隐藏的div（捐赠）可见有一个按钮。我不确定getElementById是否适用于div，但是我也找不到，因为当我将id更改为h1时，只是对样式进行了简单的颜色更改，但它也不起作用。我的按钮或语法有问题吗？

来源

2017-02-10 user7548189

你可以只运行'的document.getElementById（“捐赠”）的JavaScript'在你喜欢的浏览器的开发者工具的控制台，看看它返回，然后从那里。 – niels

你仍然可以使用内嵌的onclick工作这一点。

安德烈是关于ID需要是个人正确的。技术上虽然

<button onclick="document.getElementById('donation').style.visibility='visible'">Support</button> 
 
<div style="background-color: gray; width: 50px; height: 50px; visibility: hidden;" id="donation"></div>

，这是更好地保持你的CSS和JavaScript头标记或外部的HTML。

来源

2017-02-10 22:41:31 TMKAB121

除非你在做特征检测或类似的东西加载JS权利之前''，而不是在''。 – hungerstar

为了document.getElementById('donation')返回一个DOM元素这种情况下将需要真正

应该有一个html元素只有一个在你的页面id="donation"。例如：<div id="donation"></div>

这有可能是你的功能完美的作品（可以告诉你，如果它是通过看你的浏览器console你按下按钮后），但你的元素将仍然不可见。例如，如果其display属性设置为none。浏览器可能无法呈现元素的原因有很多。要找准原因，最快的方式是为您打造一个最小的，完整的和可核查的例子（使用<>按钮），我们可能会遇到的问题。

来源

2017-02-10 22:36:43

对于我来说，我想分离代码将保持事情更清晰可读。

<button id="donation_btn">Support</button>

function enableDonation(button, donationElement) { 

    // check if the button is defined 
    if (button != undefined 
    && button != null) { 

     button.addEventListener("click", function() { 
      donationElement.style.display = "block"; 
     }); 
} 

// execute the code on document load 
window.addEventListener("load", function() { 

    enableDonation( 
     document.getElementById("donation_btn"), 
     document.getElementById("donation") 
    ); 

});

来源

2017-02-10 22:41:41

“的document.getElementById”是不是为我工作

回答

相关问题