3
votes

Comment puis-je faire fonctionner mon bouton sur les appareils mobiles?

Je dois coder un site Web de 3 pages pour l'examen de première année de mon école. Le site Web doit fonctionner sur n'importe quel ordinateur et sur un appareil mobile (en particulier un Nexus 5).
J'ai créé un bouton sur la deuxième page qui donne des phrases aléatoires chaque fois que vous cliquez dessus. Cela fonctionne parfaitement sur ordinateur, mais chaque fois que je mets mon site Web sur un appareil mobile (émulateurs, etc.), le bouton ne fonctionne pas. J'ai vu beaucoup de gens en ligne avoir le même problème mais aucune solution n'a fonctionné ou ne correspondait à mon problème.

Voici mes codes pour le bouton;

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

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

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]
}

Merci pour votre temps

javascript jquery html css button

7 commentaires

En regardant cela, le code ne semble pas contenir de bizarrerie.

Le problème est le CSS du

pas le bouton

Essayez sans la classe .boite et vérifiez si le problème persiste.

Votre ligne margin-left: -806px; peut placer le div en dehors de la fenêtre, ce qui donne l'impression que rien ne se passe.

Essayez d'utiliser addEventListener () au lieu des attributs d'événement on * incroyablement obsolètes

Bien qu'il y ait plusieurs opinions sur l'enveloppe des méthodes d'événement, je suggère d'utiliser onclick = "newNews ();" au lieu de onClick = "newNews ();"

@Thangadurai c'est la même chose ...

4 Réponses :

2
votes

Supprimez la propriété margin-left - elle place l'élément div hors de l'écran - et vous pouvez également modifier le code background-color > à quelque chose de plus visible!

 

<button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button>
<div id="newsDisplay" class="boite"></div>
.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;
}
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]
}

2 commentaires

@ MarineCavaillès; dans votre question, vous dites que votre code fonctionnait parfaitement sur les ordinateurs, mais ce n'est évidemment pas le cas, il est donc difficile de dire où se trouve un bogue.

Désolé ouais ça marche sur ordinateur mais pas sur les appareils mobiles, mais j'ai trouvé une solution grâce aux réponses de tout le monde!

2
votes

J'ai donc simplifié un peu votre script. Voir le Jsfiddle

Ce qui a le plus mal tourné était le css

margin-left: -806px;

0 commentaires

3
votes

Remplacez votre valeur de margin-left par une valeur inférieure ou par un pourcentage plutôt qu'un pixel dans votre css pour éviter que le div ne soit supprimé de l'affichage sur les écrans mobiles.

Ajoutez également un identifiant unique à votre bouton et ajoutez-y des écouteurs d'événements dans le JavaScript lui-même plutôt que d'écrire vos scripts en ligne comme ceci:

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

/* 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);

NB Le e.preventDefault est pour empêcher les deux écouteurs d'événements d'être déclenchés sur certains appareils mobiles qui simule un clic de souris lorsqu'un élément est touché ou sur les appareils tels que les ordinateurs portables à écran tactile où les deux événements sont déclenchés simultanément.

Vérifiez ceci article sur la gestion des événements pour une explication plus détaillée de la façon dont vous pouvez gérer les deux événements sur un seul élément.

0 commentaires

2
votes

La marge gauche semble être le problème ici. Supprimez que tout fonctionnera correctement.

Vérifiez ceci.

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

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

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]
}

0 commentaires