Я пытаюсь выяснить, почему обновление элемента с внутренним текстом в одном случае, а не в другом [закрыто] ⇐ Javascript

[Anonymous]

У меня есть следующий CodePen: https://codepen.io/roniyaniv/pen/emoxebr (это барабанная машина Freecodecamp).
У меня все работает, как и ожидалось, и Все тесты проходят. См. Строки 40-45 в коде JS. < /P>
html: < /p>

Код: Выделить всё

< /code>
javascript: < /p>
const drumMachine = document.getElementById("drum-machine");
const drumMachineDisplay = document.getElementById("display");
const drumPadKeyOrder = ['Q', 'W', 'E', 'A', 'S', 'D', 'Z', 'X', 'C'];
const drumPads = [
{
id: 'heater-1',
src: 'Heater-1.mp3'
},{
id: 'heater-2',
src: 'Heater-2.mp3'
},{
id: 'heater-3',
src: 'Heater-3.mp3'
},{
id: 'heater-4',
src: 'Heater-4_1.mp3'
},{
id: 'clap',
src: 'Heater-6.mp3'
},{
id: 'open-hh',
src: 'Dsc_Oh.mp3'
},{
id: 'kick-n-hat',
src: 'Kick_n_Hat.mp3'
},{
id: 'kick',
src: 'RP4_KICK_1.mp3'
},{
id: 'closed-hh',
src: 'Cev_H2.mp3'
}
]

// When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).

const outputPadName = (key) => {
const indexOfKey = drumPadKeyOrder.indexOf(key);
const padName = drumPads[indexOfKey].id;

// this works:
document.getElementById("display").innerText = padName;

// this does not work:
// drumMachineDisplay.innerText = padName;
}

const play = (key) => {
document.getElementById(key).play();
}

const handleClickOnDrum = (e) => {
const key = e.target.querySelector('audio').getAttribute("id");
// console.log(key);
outputPadName(key);
play(key);
}

const handleKeydown = (e) => {
// TODO: prevent play when modifier keys (command, ctrl etc) are pressed together with drum keys
const key = e.key.toUpperCase();
if (drumPadKeyOrder.indexOf(key) != -1) {
// key exists in keys array
// console.log(key);
outputPadName(key);
play(key);
}

}

const renderDrumPads = (pads, keyorder) => {
let htmlToRender = '';
pads.forEach( (element, index) => {
htmlToRender += '' + keyorder[index] + ''
})
drumMachine.innerHTML += htmlToRender;

// add event listener to drum pads
const renderedDrumPads = [...document.getElementsByClassName("drum-pad")];
renderedDrumPads.forEach(element => {
element.addEventListener("click", handleClickOnDrum)
})

// add event listener for keypresses
document.addEventListener("keydown", handleKeydown);
}

// render drumpads on DOM load
document.addEventListener("DOMContentLoaded", renderDrumPads(drumPads, drumPadKeyOrder));

Я не могу понять Почему строка, которая не работает, не работает. То есть, когда нажата на барабанную площадку или нажатую подходящую клавишу клавиши, вместо того, чтобы отображать имя подушки в div #display, кажется, ничего не произойдет. < /P>
Я предполагаю Это что -то в области масштаба, но я не уверен и не могу это объяснить. Кто -нибудь может объяснить мне это простыми терминами?


Подробнее здесь: https://stackoverflow.com/questions/794 ... in-one-cas