Search code examples
javascripthtmlbuttonexpressioninnertext

Values strictly equal problems

I am new here and in coding, and I am having grading for codes I have to make. The grader is very picky and so I am having problems with that, so order matters, and things that in real world do not matter much. But still have some issues. I created a keyboard, from Javascript, by creating buttons, assigning them innerText, an ID and placing them one after the other. Here is my code.

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

The problems I encounter is, for start that "I should have 6 buttons" and it is counting me as I have 12, why does it count double and how can I make this, I tried here by posting line by line (I had all info button by button but found out I have to write the lines in order they want, apparently -ik, that sucks. THEN, i have that "button should have innerText Bb4 or A#4", and I have this message: The expression evaluated to a falsy value: assert(note.indexOf(text) >= 0)

Why is that and... I ALREADY HAVE THAT INNER TEXT, so i dont know whats the problem.

Then the program just keep carrying these messages, as if things would be in a wrong order, after two of the messages I have mentioned before: ⨯ 3. button should have id-attribute C5 (3p) Expected values to be strictly equal: 'A#4' !== 'C5'

Looks like, until I dont solve the Bb4 problem, I dont get to be checked the rest of the code -and I have only 5 possible submissions to use...

Thanks!

Solution

  • Right now, you're creating a button inside a button for each:

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

    This is like creating something which is

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

    That's what's causing the problem.

    Instead, assign to the id and textContent properties of your created buttons:

    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

    (no need for setAttribute, it's unnecessarily verbose)

    Or, less repetitively, if the IDs match the 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;
}