值严格相等问题

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，这很糟糕。然后，我有“按钮应该有innerText Bb4或A#4”，我有这样的消息： 表达式评估为假值：assert(note.indexOf(text) >= 0)这是为什么……我已经有了内部文本，所以我不知道问题是什么。然后程序继续携带这些消息，就好像事情会以错误的顺序出现，在我之前提到的两条消息之后： ⨯ 3. 按钮应该有 id-attribute 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;

}