• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

161
Views
Undo does not work for a replaced content on a div in html

I am trying to create a code that works when you put it on the google search bar, that is a must and i created a div you can edit, also i created a reset button that replaces the content on the div with the default text, but when I try to press ctrl + z it does not go back, and i don't know how to make it work

-I cannot get rid of the: data:text/html, part because it wouldn't work in the search bar for google -i do have to have all the code types in just one document, because i have to copy paste it all on the google search bar

function reset() {
  div_1.innerHTML = '<p> Default text<p>';
}
.div_1 {
  display: block;
  background-color: rgba(255, 0, 0, 0.5);
  height: 80%;
  position: relative;
  width: 60%;
  position-left: 100px;
}
<div contenteditable="true" class="div_1" id="div_1">
  <p> Default text<p>
</div>
<button onclick="reset()">reset</button>

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

function reset() {
  div_1.innerHTML = ''; //set the inner HTML to empty string
}
.div_1 {
  display: block;
  background-color: rgba(255, 0, 0, 0.5);
  height: 80%;
  position: relative;
  width: 60%;
  position-left: 100px;
}
<div contenteditable="true" class="div_1" id="div_1">
  <p> Default text<p>
</div>
<button onclick="reset()">reset</button>

I think you are trying to make the form empty when you press reset button. So you have to change the inner HTML to an empty string in order to do that.

I hope it helped

almost 3 years ago · Juan Pablo Isaza Report

0

i was able to find an option with the memento pattern and creating an event for the ctrl + z input on the keyboard

function copy(){
 inp1.select();
  navigator.clipboard.writeText(inp1.value);
ctn.innerHTML = inp1.value;

}
  var mementos = [];
    function reset() {
          mementos.push(document.getElementById('div_1').innerHTML);
          div_1.innerHTML= '<p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p>';
}


    document.addEventListener('keydown', function(event) {
      if (event.ctrlKey && event.key === 'z') {
        var lastMemento = mementos.pop();
      div_1.innerHTML = lastMemento;
      }
    });


    
      function undo() {
      var lastMemento = mementos.pop();
      div_1.innerHTML = lastMemento;
    }  
input{
  width:200px;
  height: 100%;

}
.div_1{
  display: block;
   background-color:rgba(255, 0, 0, 0.5);
   height:400px;
   position: relative;
   width: 400px;
   padding-left: 2px;
 }
button{
  position: relative;

}
.ctn {
  display: inline;
  background-color: red;

}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Notes</title>
  </head>
  <body>
    <link rel="stylesheet" href="syles.css">
    <input placeholder="(000)-000-0000" maxlength="10" id="inp1">
    <button onclick="reset()">reset</button>
    <button onclick="copy()">copy</button>
<button onclick="undo()">Undo</button>
<div contenteditable="true"class="div_1" id="div_1">
<p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p>
</div>

</body>
  </html>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error