Question

我正在制作一个小项目。对于这个项目，我希望能够向我的网站的访问者显示div。但是，我希望我的内容会有所不同。我创建了三个div，都有不同的id。当有人进入我的网站时，我希望他/她只看到三个div中的一个。我已经创建了一些我认为可以解决问题的代码，但显然它没有。如果有人能告诉我我做错了什么，我真的很感激。

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";
}

现在，警报似乎工作正常，因此这意味着在决定“ChosenDiv”（一，二或三）时没有问题。但是，当我想让所选的div可见（display:none - ＆gt; display:inline-block）时，它根本不会这样做。我尝试使用谷歌浏览器来定义问题，但我不知道问题是什么。

Answer 1

为什么答案总是必须过于复杂？

只需运行代码，检查您的控制台并找出您使用getElementbyId而不是getElementById使用大写b，它的基本问题解决方案？

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

如果你问我，jQuery可以用来简单地编辑一些CSS或选择一些简单的元素。

Answer 2

使用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>

Answer 3

您可以将数组中的值转换为以下格式：

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

Answer 4

只需使用一个新功能来调用显示器，将其与随机寄存器混在一起是获取大量错误的一种方法，如前所述，您似乎需要检查大小写，这很重要

显示随机div onclick

4 个答案: