Не могу понять, что не так с innerHTML?

Question

[holllop]

Есть форма в ней кнопка он делает поиск по id, и найдя его по идее должна выводить в форме таблицы 6*2. Я это сделал так

formDel.addEventListener('submit', (event) => {
  event.preventDefault();
  const id = parseInt(document.getElementById('id').value);

  // Найти запись с соответствующим идентификатором в JSON
  const record = json.find((item) => item.id_k1 === id);
  
  // Обновить содержимое формы
  if (record) {
    wrapper1.innerHTML = 
    "<div>" +
      '<p>Вы точно хотите удалить запись ?</p>' +
      '<table>'+
        '<tr>' +
          '<th>1:</th>' +
          '<th>2:</th>' +
          '<th>3:</th>' + 
          '<th>4:</th>' +
          '<th>5:</th>' +
          '<th>6:</th>' +
        '</tr>' +
        '<tr>' +
          '<td>${record.id_k1}</td>' +
          '<td>${record.n_mine}</td>' +
          '<td>${record.name_mine}</td>' +
          '<td>${record.adress}</td>' +
          '<td>${record.full_name_of_direcor}</td>' +
          '<td>${record.phone_number}</td>' +
        '</tr>' +
      '</table>' +
      '<button type="submit" name="submit" class="dle">Удалить запись</button>' +
    '</div>'
;
  } else {
    wrapper1.innerHTML = 'Записи с таким ID не найдено';
  }
});

И столкнулся с проблемой. Точнее вся проблема в команде wrapper1.innerHTML сначала столкнулся с ошибкой JSX expressions must have one parent element, которую быстро исправил обернув весь HTML-запрос div-ом, но потом появилась ошибка, Uncaught SyntaxError: Unexpected token '<' и потом я экспериментировал с кавычками, но что-то вообще не понимаю что я делаю не так ?

Comments

[archelon]

уберите все лишние кавычки и плюсики и возьмите эту конструкцию в обратные кавычки ``

[holllop]

archelon, от прям всю ?

[archelon]

так:

wrapper1.innerHTML = `<div>
     <p>Вы точно хотите удалить запись ?</p>
     <table>
     <tr>
          <th>1:</th>
          <th>2:</th>
          <th>3:</th>
          <th>4:</th>
          <th>5:</th>
          <th>6:</th>
        </tr>
        <tr>
          '<td>${record.id_k1}</td>
          ...
`

[holllop]

archelon, не пашет сделал

'<div>
    <p>Вы точно хотите удалить запись:</p> 
    <table>
      <tr>
        <th>Порядковый номер записи:</th>
        <th>Номер шахты:</th>
        <th>Название шахты:</th>
        <th>Адрес шахты:</th>
        <th>ФИО директора:</th>
        <th>Номер телефона:</th>
      </tr>
      <tr>
        <td>${record.id_k1}</td>
        <td>${record.n_mine}</td>
        <td>${record.name_mine}</td>
        <td>${record.adress}</td>
        <td>${record.full_name_of_direcor}</td>
        <td>${record.phone_number}</td>
      </tr> 
    </table>
    <button type="submit" name="submit" class="dle">Удалить запись</button>
  </div>'

получил кучу ошибок

[archelon]

https://learn.javascript.ru/es-string

[archelon]

Обратные кавычки!
`` — на клавиатуре в лат. раскладке слева вверху, где ё и ~

[holllop]

archelon, это работает только если записать всю мою конструкцию в одну строку

[archelon]

нет, это работает при многострочном вводе.

Answer 1

[holllop]

if (record) {
    wrapper1.innerHTML = 
    `<div> <p>Вы точно хотите удалить запись:</p> <table> <tr> <th>Порядковый номер записи:</th> <th>Номер шахты:</th> <th>Название шахты:</th> <th>Адрес шахты:</th> <th>ФИО директора:</th> <th>Номер телефона:</th> </tr> <tr> <td>${record.id_k1}</td> <td>${record.n_mine}</td> <td>${record.name_mine}</td> <td>${record.adress}</td> <td>${record.full_name_of_direcor}</td> <td>${record.phone_number}</td> </tr> </table> <button type="submit" name="submit" class="dle">Удалить запись</button> </div>`; //это всё должно быть в одной строке
  } else {
    wrapper1.innerHTML = 'Записи с таким ID не найдено';
  }
});

Не знаю может это работает и при многострочном вводе (и это особенность из-за моего редактора кода)

Comments

[archelon]

должно работать в многострочной конструкции.
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Answer 2

[Aetae]

Судя по ошибкам "JSX expressions must have one parent element," и "Uncaught SyntaxError: Unexpected token '<'" у вас где-то кусок html кода вне строки.
Т.е. прям <какоц-то тег> ... вместо '<какоц-то тег> ...'.
Код из вопроса должен работать без проблем.