javascript - 值严格相等问题

Question

我是编码方面的新手，我正在对我必须制作的代码进行评分。评分者非常挑剔，所以我在这方面遇到了问题，所以顺序很重要，而现实世界中的事情并不重要。但仍然存在一些问题。我通过 Javascript 创建了一个键盘，方法是创建按钮，为它们分配 innerText、ID 并将它们一个接一个地放置。这是我的代码。

let G4 = document.createElement ('button');
let sibemol = document.createElement ('button');
let C5 = document.createElement ('button');
let D5 = document.createElement ('button');
let F5 = document.createElement ('button');
let G5 = document.createElement ('button');

G4.innerHTML = '<button id="G4">G4</button>';
sibemol.innerHTML = '<button id="A#4">Bb4</button>';
C5.innerHTML = '<button id="C5">C5</button>';
D5.innerHTML = '<button id="D5">D5</button>';
F5.innerHTML = '<button id="F5">F5</button>';
G5.innerHTML = '<button id="G5">G5</button>';

G4.setAttribute('id', 'G4');
sibemol.setAttribute('id', 'A#4');
C5.setAttribute('id', 'C5');
D5.setAttribute('id', 'D5');
F5.setAttribute('id', 'F5');
G5.setAttribute('id', 'G5');

let keyboard = document.getElementById('simple-keyboard');
keyboard.appendChild(G4);
keyboard.appendChild(sibemol);
keyboard.appendChild(C5);
keyboard.appendChild(D5);
keyboard.appendChild(F5);
keyboard.appendChild(G5);

我遇到的问题是，首先“我应该有 6 个按钮”，它正在算我，因为我有 12 个，为什么它算双倍，我怎样才能做到这一点，我在这里尝试逐行发布(我逐行发布了所有信息，但发现我必须按照他们想要的顺序写行，显然-ik，这很糟糕。然后，我有“按钮应该有 insideText Bb4 或 A#4”，并且我有以下消息:表达式计算结果为假值:assert(note.indexOf(text) >= 0)

这是为什么……我已经有了内部文本，所以我不知道问题是什么。

然后程序就继续携带这些消息，就好像在我之前提到的两条消息之后事情的顺序是错误的:⨯ 3. 按钮应具有 id 属性 C5 (3p)期望值严格相等:'A#4' !== 'C5'

看起来，在我不解决 Bb4 问题之前，我不会检查其余的代码 - 而且我只有 5 个可能的提交可供使用...

谢谢!

Answer 1

现在，您正在为每个按钮在按钮内创建一个按钮:

let C5 = document.createElement ('button');
C5.innerHTML = '<button id="C5">C5</button>';

这就像创造一些东西

<button><button id="C5">C5</button></button>

这就是导致问题的原因。

相反，分配给您创建的按钮的 id 和 textContent 属性:

sibemol.id = 'A#4'; // you're already doing this with setAttribute below
sibemol.textContent = 'Bb4';
C5.id = 'C5';
C5.textContent = 'C5';
D5.id = 'D5';
D5.textContent = 'D5';
// etc

(不需要setAttribute，它不必要地冗长)

或者，不那么重复，如果 ID 与 textContent 匹配:

const keys = ['G4', 'Bb4', 'C5', 'D5', 'F5', 'G5'];
for (const key of keys) {
  const button = keyboard.appendChild(document.createElement('button'));
  button.id = key;
  button.textContent = key;
}