0
votes

Existe-t-il un moyen de simplifier le code à l'aide d'un tableau?

Existe-t-il un moyen de simplifier le code ci-dessous en utilisant un tableau? Par exemple, lorsque le bouton 1 (avec l'index 0) dans le HTML est cliqué, cela pourrait-il être utilisé pour obtenir une valeur à l'index 0 dans un autre tableau?

<button onclick="f1()">no.1</button>
<button onclick="f2()">no.2</button>
<button onclick="f3()">no.3</button>
<button onclick="f4()">no.4</button>
<p id="dis"></p>

function f1() {
  document.getElementById("dis").innerHTML = "JoeMae";
}

function f2() {
  document.getElementById("dis").innerHTML = "TanakaMae";
}

function f3() {
  document.getElementById("dis").innerHTML = "James";
}

function f4() {
  document.getElementById("dis").innerHTML = "Deus";
}

javascript arrays button

1 commentaires

Vous pouvez utiliser une boucle de commutation et appliquer addEventListener au document.getElementById (); et appliquer le même ID à tous les boutons (pas très fiable, car les ID sont supposés être "unique") ou document.getElementsByClass (); et appliquer la même classe aux boutons (meilleure approche)

5 Réponses :

3
votes

Utilisez un autre tableau tel que le nième index de ce tableau corresponde au nième bouton:

<button>no.1</button>
<button>no.2</button>
<button>no.3</button>
<button>no.4</button>
<p id="dis"></p>

const texts = [
  "JoeMae",
  "TanakaMae",
  "James",
  "Deus"
];
const dis = document.getElementById("dis");
document.querySelectorAll('button').forEach((button, i) => {
  button.addEventListener('click', () => {
    dis.textContent = texts[i];
  });
});

Notez qu'à moins que vous n'insériez délibérément du balisage HTML, vous devriez probablement utiliser textContent , pas innerHTML . ( textContent est plus rapide et plus sûr)

0 commentaires

5
votes

Vous pouvez simplifier sans utiliser le tableau:

function f(str) {
  document.getElementById("dis").innerHTML = str;
}

<button onclick="f('JoeMae')">no.1</button>
<button onclick="f('TanakaMae')">no.2</button>
<button onclick="f('James')">no.3</button>
<button onclick="f('Deus')">no.4</button>
<p id="dis"></p>

4 commentaires

que signifie str?

cela signifie "toute chaîne que vous pouvez mettre en argument"

@maetanaka str est juste le nom de cet argument de fonction, vous pouvez l'appeler comme vous voulez

Les gestionnaires en ligne ne sont presque jamais souhaitables, voir w3.org/wiki/The_principles_of_unobtrusive_JavaScript . Cela entraîne également un code très répétitif lorsqu'il y a beaucoup de boutons

0
votes

Voici un exemple légèrement plus clair et plus flexible de la manière d'implémenter ce type de fonctionnalité.

Si vous disposez de nombreuses fonctionnalités de rendu comme celle-ci, je vous recommande cependant d'utiliser une bibliothèque / un framework pour cela.

/ p>

<div id="buttonContainer"></div>
<div id="resultContainer"></div>

const buttonDefinitions = [
    {title: 'no.1', name: 'Monica'},
    {title: 'no.2', name: 'Erica'},
    {title: 'no.3', name: 'Rita'},
    {title: 'no.4', name: 'Tina'}
];


const buttonContainer = document.getElementById('buttonContainer');
const resultContainer = document.getElementById('resultContainer');

for (const buttonDefinition of buttonDefinitions) {
    const button = document.createElement('button');
    button.innerHTML = buttonDefinition.title;
    button.onclick = () => {
        resultContainer.innerHTML = buttonDefinition.name;
    };
    buttonContainer.appendChild(button);
}

2 commentaires

Quel est le but d'utiliser l'IIFE ici?

Vous avez tout à fait raison, cela n'a aucune utilité immédiate dans ce cas. Je l'ai enlevé.

0
votes

Vous pouvez passer l'élément à la fonction et accéder aux attributs de données de l'élément Dans l'exemple ci-dessous, je transmets data-name

<button data-name="JoeMae" onclick="f(this)">no.1</button>
<button data-name="TanakaMae" onclick="f(this)">no.2</button>
<button data-name="James" onclick="f(this)">no.3</button>
<button data-name="Deus" onclick="f(this)">no.4</button>
<p id="dis"></p>

function f(element) {
  document.getElementById("dis").innerHTML = element.dataset["name"];
}

0 commentaires

0
votes

Voici une approche qui est JS vanille. J'ai utilisé l'API dataset pour connecter chaque bouton à ses données, puis un seul gestionnaire pour récupérer et afficher ces données.

<p id='dis'></p>

"use strict";
function byId(id){return document.getElementById(id)}
function newEl(tag){return document.createElement(tag)}

window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
	var responseArray = ['JoeMae', 'TanakaMae', 'James', 'Deus'];
	responseArray.forEach( function(arrElem, elemIndex, arr)
							{
								var btn = newEl('button');
								btn.textContent = `no.${elemIndex+1}`;
								btn.dataset.response = arrElem;
								btn.addEventListener('click', onClick, false);
								document.body.appendChild(btn);
							}
						);
						
	function onClick(evt)
	{
		let text = this.dataset.response;
		byId('dis').textContent = text;
	}
}

2 commentaires

dois-je installer des dépendances ici ou non?

Non, il n'y en a pas. Juste un nouveau navigateur exécutant JS.