如何讓我的按鈕在移動設備上運行？

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>