Превращение одного тега в другой

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HJ3</title>
</head>
<style>
</style>
<body>
    <p>press Ctrl+E for edit text</p>
    <p>press Ctrl+S for save text</p>
    <hr>
    <span id = "t1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Quo debitis illum dolore ratione dignissimos exercitationem iste 
    rerum quia laudantium placeat ex voluptate eius, dolorem possimus 
    eaque sit tempore commodi sunt. </span>
    <p id = 'p2'> </p>
</body>
<script> 
      document.addEventListener("keydown", function(e) {
            if (e.ctrlKey && e.keyCode === 69) {
                e.preventDefault(); 
            }
        }, false)
      document.addEventListener("keydown", function(e) {
            if (e.ctrlKey && e.keyCode === 83) {
                e.preventDefault(); 
            }
        }, false)

    document.body.onkeydown = (e) => {
    if (e.ctrlKey && e.keyCode === 69) {
    let el1 = document.getElementById('t1');
    let el2 = document.createElement('textarea');
    el2.innerHTML = el1.innerHTML;
    el1.parentNode.replaceChild(el2, el1); }
    if  (e.ctrlKey && e.keyCode === 83) {
    let el1 = document.getElementsByTagName('textarea');
    let el2 = document.createElement('span');
    el2.innerHTML = el1.innerHTML;
    el1.parentNode.replaceChild(el2, el1); } //Ошибку выдает в этой строке 
}
</script>
</html>

Ошибка: Uncaught TypeError: Cannot read properties of undefined (reading 'replaceparent'

Сама программа отлично работает до момента использование клавиш "ctrl + S", если же использовать эту комбинацию сразу то мне любезно удалит текст.

Answer 1

Для textarea используйте value, а вы используете el1.innerHTML. И getElementsByTagName заменил на querySelector

Вот рабочий код:

document.addEventListener("keydown", function(e) {
  if (e.ctrlKey && e.keyCode === 69) {
    e.preventDefault();
  }
}, false)
document.addEventListener("keydown", function(e) {
  if (e.ctrlKey && e.keyCode === 83) {
    e.preventDefault();
  }
}, false)

document.body.onkeydown = (e) => {
  if (e.ctrlKey && e.keyCode === 69) {
    let el1 = document.getElementById('t1');
    let el2 = document.createElement('textarea');
    el2.value = el1.innerHTML;
    el1.parentNode.replaceChild(el2, el1);
  }
  if (e.ctrlKey && e.keyCode === 83) {

    let el1 = document.querySelector('textarea');
    let el2 = document.createElement('span');

    el2.innerHTML = el1.value;


    el1.parentNode.replaceChild(el2, el1);
  }
}

<p>press Ctrl+E for edit text</p>
<p>press Ctrl+S for save text</p>
<hr>
<span id="t1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Quo debitis illum dolore ratione dignissimos exercitationem iste 
    rerum quia laudantium placeat ex voluptate eius, dolorem possimus 
    eaque sit tempore commodi sunt. </span>
<p id='p2'> </p>

P.S:: Ваш вариант сейчас не предусматривает, если сперва нажмут Ctrl+S, если будете использовать учтите это.

БЛОГ НА HUSL

Превращение одного тега в другой

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