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>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
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>