Как переделать, чтобы функционал работал без Jquery?

Рейтинг: 0Ответов: 1Опубликовано: 21.12.2014
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Дз</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
    function correct(){
        var tx = $("#l").html();
        $("#wrapper_l").html('<textarea id="l">' + tx + '</textarea>');      
        $("#safe123").show();
        $("#red123").hide();
    };

        $("textarea").css({ "background-color": "#019201" });
    function safe(){
        var tx = $("#l").val();
        $("#safe123").hide();
        $("#red123").show();      
        $("#wrapper_l").html('<p id="l">' + tx + '</p>');
    };
  </script>
</head>

<body>
<img style="float:left;" src="photo.jpg " height="20%" width="20%" />

<div id="wrapper_l">
    <p id="l">Мой тэг</p>
  </div> 
  <button id="red123" >Редактировать</button>
  <button id="safe123" style="display:none" > Сохр </button>
</body>
</html>
javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Если не особо вникая в суть, то можно так сделать:

function correct() {
    var tarea = document.createElement('textarea');
    tarea.id = 'editArea';
    tarea.style.backgroundColor = '#019201';
    tarea.value = myTag.innerHTML;
    wrapperTag.replaceChild(tarea, myTag);
    safe123.style.display = 'block';
    red123.style.display = 'none';
}

function safe() {
    // или же createElement, как в функции выше, или можно так:
    wrapperTag.innerHTML = '<p id="myTag">' + editArea.value + '</p>';
    safe123.style.display = 'none';
    red123.style.display = 'block';
}

red123.addEventListener('click', correct, false);
safe123.addEventListener('click', safe, false);

HTML

<img style="float:left;" src="photo.png" height="20%" width="20%" />
<div id="wrapperTag">
    <p id="myTag">Мой тэг</p>
</div>
<button id="red123">Редактировать</button>
<button id="safe123" style="display:none">Сохр</button>