显示随机div onclick

我在做一个小项目。对于这个项目，我希望能够向我的网站的访问者展示div。但是，我希望我的内容有所不同。我创建了三个div，全部使用不同的id。当有人进入我的网站时，我希望他/她只看到三个div中的一个。我创建了一些我认为可以实现的代码，但显然它没有。如果有人能告诉我我做错了什么，我会很感激。显示随机div onclick

HTML

<div id="one"> 
1 
</div> 

<div id="two"> 
2 
</div> 

<div id="three"> 
3 
</div> 

<input type="button" id="Button" value="Random" onclick="RandomDiv();" />

CSS

#one { 
    display:none; 
} 

#two { 
    display:none; 
} 

#three { 
    display:none; 
}

JAVASCRIPT

function RandomDiv() { 
    var myarray= new Array("one","two","three"); 
    var ChosenDiv = myarray[Math.floor(Math.random() * myarray.length)]; 
    alert(ChosenDiv); //Just to show this. 
    document.getElementbyId(ChosenDiv).style.display="inline-block"; 
}

现在，警报似乎工作鳍片e，这意味着在决定“ChosenDiv”（一，二或三）时没有问题。但是，当我想让所选的div可见时（display:none - >display:inline-block），它根本就不会这样做。我试图使用Google Chrome来定义问题，但我无法分辨问题所在。

来源

2017-04-16 Syan

为什么答案总是如此过于复杂？

只需运行代码，检查您的控制台，并确定您使用的是getElementbyId而不是getElementById，并且其首字母为b，这是基本的问题解决方案？

TypeError: document.getElementbyId is not a function[Learn More] script.js:6:5

jQuery是办法不多投入到项目中简单地编辑一些CSS或选择一些简单的元素，如果你问我。

来源

2017-04-16 00:48:13

谢谢！一定很愚蠢，看不到这一点。我看到它确实说了，但不知道这个问题。再次感谢。 – Syan

使用jQuery可以帮助改变JavaScript中的CSS。

有关如何使用此功能的更多信息，请参阅http://api.jquery.com/css/。

function RandomDiv() { 
    var myarray= new Array("one","two","three"); 
    var ChosenDiv = myarray[Math.floor(Math.random() * myarray.length)]; 
    alert(ChosenDiv); //Just to show this. 
    document.getElementById(ChosenDiv).css("display":"inline-block"); 
}

不要忘记在你的代码中包含jQuery！

<script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script>

来源

2017-04-16 00:45:24

这段代码是否会运行，或者它应该包含类似于'（没有JQuery）？ –

我不确定Syan如何使用这个应用程序。我刚从上面编辑他的代码。要运行此代码，您需要将代码移出某个函数或将其从一个按钮或链接中触发。 –

你可以你的数组中值转换为这种格式：

var myarray= new Array("#one","#two","#three");

来源

2017-04-16 00:45:49 Osama

，这将使它通过“#one”的id获得元素。他正在做正确的那部分 –

只需使用一个新的函数调用显示，在与您的随机化结块是一个办法让错误的整个混乱，并且如前面提到的，看来你需要检查你的资本，这一点很重要

来源

2017-04-16 01:16:12 Provision

显示随机div onclick

回答

相关问题