如何让我的按钮在移动设备上运行？

Question

我必须为我学校的第一年考试编写一个3页的网站。 该网站必须在任何计算机和移动设备（特别是Nexus 5）上工作。
我在第二页上创建了一个按钮，每次单击它时都会给出随机句子。 它完全适用于计算机，但每次我将我的网站放在移动设备（模拟器等）上时按钮都不起作用。 我看到网上有很多人遇到同样的问题，但解决方案没有工作或与我的问题相符。

这是我的按钮代码;

 var news = [ 'omg i need help', 'haaaaaaaaa', 'skdkskfsjize', 'I ll fail my exams so bad', 'blablabla', ] function newNews() { var randomNumber = Math.floor(Math.random() * (news.length)); document.getElementById('newsDisplay').innerHTML = news[randomNumber] } 

 .boite { overflow: hidden; position: fixed; background-position: right; float: right; font-size: 14px; line-height: 13px; width: 200px; display: inline-block; vertical-align: right; margin-left: -806px; margin-top: 43px; background-color: darkolivegreen; border-bottom-style: groove; border-width: thick; } 

 <button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button> <div id="newsDisplay" class="boite"></div> 

感谢您的时间

Answer 1

将您的margin-left值替换为较小的值或使用百分比而不是css中的像素，以防止div在移动屏幕中显示。

另外，在按钮中添加一个唯一的id，并在JavaScript本身中添加事件监听器，而不是像这样编写脚本：

 /* JavaScript */ var btn = document.getElementById("newsBtn"); var news = ['a','b','c','d','e',]; function newNews (e) { e.preventDefault(); var randomNumber = Math.floor(Math.random()*(news.length)); document.getElementById('newsDisplay').innerHTML = news[randomNumber]; } btn.addEventListener("click", newNews); btn.addEventListener("touchstart", newNews); 

 <!-- HTML --> <button id="newsBtn" type="button">News</button> <div id="newsDisplay" class= "boite"></div> 

注意 ： e.preventDefault用于防止在触摸元素时模拟鼠标单击的某些移动设备上或在同时触发两个事件的触摸屏笔记本电脑等设备上触发两个事件侦听器。

查看有关处理事件的文章 ，以便更深入地解释如何处理单个元素上的两个事件。

Answer 2

删除margin-left属性 - 它将div元素放在屏幕外 - 您可能还想将background-color更改为更明显background-color ！

 var news = [ 'omg i need help', 'haaaaaaaaa', 'skdkskfsjize', 'I ll fail my exams so bad', 'blablabla', ] function newNews() { var randomNumber = Math.floor(Math.random() * (news.length)); document.getElementById('newsDisplay').innerHTML = news[randomNumber] } 

 .boite { overflow: hidden; position: fixed; background-position: right; float: right; font-size: 14px; line-height: 13px; width: 200px; display: inline-block; vertical-align: right; margin-top: 43px; background-color: darkolivegreen; border-bottom-style: groove; border-width: thick; } 

 <button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button> <div id="newsDisplay" class="boite"></div> 

Answer 3

所以我简化了你的脚本。 见Jsfiddle

最糟糕的是css

margin-left: -806px;

Margin-left确保它落在了屏幕之外。 还用移动调试测试它，工作正常。

Answer 4

保证金左边似乎是问题所在。 删除一切都会正常工作。

检查一下。

 var news = [ 'omg i need help', 'haaaaaaaaa', 'skdkskfsjize', 'I ll fail my exams so bad', 'blablabla', ] function newNews() { var randomNumber = Math.floor(Math.random() * (news.length)); document.getElementById('newsDisplay').innerHTML = news[randomNumber] } 

 .boite { overflow: hidden; position: fixed; background-position: right; float: right; font-size: 14px; line-height: 13px; width: 200px; display: inline-block; vertical-align: right; /*margin-left: -806px;*/ margin-top: 43px; background-color: darkolivegreen; border-bottom-style: groove; border-width: thick; } 

 <button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button> <div id="newsDisplay" class="boite"></div>