Есть ли способ упростить код с помощью массива?

Question

Есть ли способ упростить приведенный ниже код с помощью массива? Например, когда нажимается кнопка 1 (с индексом 0) в HTML, может ли она использоваться для получения значения по индексу 0 в другом массиве?

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

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

Answer 1

Вы можете упростить без использования массива:

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

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

Answer 2

Используйте другой массив так, чтобы n-й индекс этого массива соответствовал n-й кнопке:

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

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

Обратите внимание, что если вы не намеренно вставляете разметку HTML, вам, вероятно, следует использовать textContent, а не innerHTML.(textContent быстрее и безопаснее)

Answer 3

Вот подход, который ванильный JS.Я использовал dataset API для подключения каждой кнопки к ее данным, затем один обработчик для извлечения и отображения этих данных.

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

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

Answer 4

Вы можете передать элемент в функцию и получить доступ к атрибутам данных элемента. В приведенном ниже примере я передаю data-name

function f(element) {
  document.getElementById("dis").innerHTML = element.dataset["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>

Answer 5

Ниже приведен более понятный и гибкий пример реализации этого типа функций.

Если у вас много подобных функций рендеринга, я бы порекомендовал вам использовать для этого библиотеку / фреймворк.

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

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