Почему при записи в innerHTML не получается использовать ES6 синтаксис?

Question

Пометил звёздочкой интересующий фрагмент кода.. не получается в innerHTML записать так:

<input value="`${td.innerHTML}`"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        table, td, th {
            width: 150px;
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }

        button {
            margin-top: 10px;
            display: block;
        }

        input {
            margin-top: 10px;
        }
    </style>
    <table>
        <tr>
            <td>25</td>
            <td>11</td>
            <td>8</td>
        </tr>
        <tr>
            <td>54</td>
            <td>13</td>
            <td>22</td>
        </tr>
        <tr>
            <td>15</td>
            <td>23</td>
            <td>6</td>
        </tr>

    </table>


</head>
<body>

</body>

<script>
let table=document.querySelector("table")
table.addEventListener("click", ()=>{
    let td=event.target

    td.innerHTML='<input type="text" value="'+td.innerHTML+'"/>' //(*)
    let button=document.createElement('button')
})
</script>

</html>

Answer 1

let table = document.querySelector("table")
table.addEventListener("click", () => {
  let td = event.target;
  if (td.tagName == "TD") {
    td.innerHTML = '<input type="text" onblur="removeInput(this)" value="' + td.innerHTML + '"/>';
    td.querySelector('input').focus();
  }
})

function removeInput(input) {
  console.log(input.value);
  let td = input.parentNode;
  td.innerHTML = input.value;
}

table,
td,
th {
  width: 150px;
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

button {
  margin-top: 10px;
  display: block;
}

input {
  margin: 0px;
  width: 25px;
}

<table>
  <tr>
    <td>25</td>
    <td>11</td>
    <td>8</td>
  </tr>
  <tr>
    <td>54</td>
    <td>13</td>
    <td>22</td>
  </tr>
  <tr>
    <td>15</td>
    <td>23</td>
    <td>6</td>
  </tr>

</table>

БЛОГ НА HUSL

Почему при записи в innerHTML не получается использовать ES6 синтаксис?

Ответы (1 шт):