Как заставить мою кнопку работать на мобильных устройствах?
Мне нужно написать код на 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>Спасибо за уделенное время
Проблема в том, что CSS<div> не кнопка
Попробуйте без класса .boite и проверьте, сохраняется ли проблема.
Ваша строка margin-left: -806px; может размещать div за пределами области просмотра, из-за чего создается впечатление, что ничего не происходит.
Попробуйте использовать addEventListener() вместо невероятно устаревших атрибутов событий on*.
Хотя существует несколько мнений относительно оболочки методов событий, я предлагаю использовать onclick = "newNews ();" вместо onClick = "newNews ();"
@Thangadurai, это то же самое ...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Удалите свойство margin-left - оно помещает элемент div за пределы экрана - и вы также можете захотеть изменить 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>@ MarineCavaillès; в вашем вопросе вы говорите, что ваш код отлично работал на компьютерах, но, очевидно, это не так, поэтому трудно сказать, где может быть ошибка.
Извините, да, он работает на компьютере, но не на мобильных устройствах, но я нашел решение благодаря всем ответам!
Поэтому я немного упростил ваш сценарий. См. Jsfiddle
Что в основном пошло не так, так это css
margin-left: -806px;
Margin-left гарантирует, что он выпадет за пределы экрана. Также протестировал с мобильной отладкой, работает нормально.
Замените значение margin-left меньшим значением или процентным соотношением, а не пикселем в вашем CSS, чтобы предотвратить отображение div на мобильных экранах.
Кроме того, добавьте уникальный идентификатор к вашей кнопке и добавьте к нему слушателей событий в самом 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>N.B.e.preventDefault предназначен для предотвращения запуска обоих прослушивателей событий на определенных мобильных устройствах, которые имитируют щелчок мыши при прикосновении к элементу, или на таких устройствах, как ноутбуки с сенсорным экраном, где оба события запускаются одновременно.
Проверьте этот статья при обработке событий, чтобы получить более подробное объяснение того, как вы можете обрабатывать оба события в одном элементе.
Кажется, проблема здесь в оставшейся марже. Уберите, что все будет нормально работать.
Проверь это.
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>
Глядя на это, кажется, что в коде нет ничего странного.