I have div tag with contentEditable = 'true'. When I enter text from my keyboard and then call the undo function (document.execCommand('undo',false, null)), all of the text I entered is deleted. I want to just undo the last character typed. How can I do that?
function doUNDO()
{
document.execCommand('undo',false, null);
}
<!DOCTYPE html>
<html>
<head>
<script src="formulas.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
</head>
<body id="main" spellcheck="false">
<span contenteditable="false">
<button onclick="doUNDO()">UNDO</button>
</span>
<div id = "mainDiv"contenteditable="true">a</div>
</body>
</html>
In doUndo() instead of calling execCommand you could just remove the last character from the div, if it is not empty.
E.g.
function doUNDO() {
var mainDIV = document.getElementById('mainDiv')
mainDIV.innerHTML = mainDIV.innerHTML.substr(0, mainDIV.innerHTML.length - 1);
}
Related
I have a folder with two files each, once the HTML file, and once the JS file to make everything clearer. My problem now is that I try to access an ID within the HTML file with the getElementById but this doesn't seem to work.
var score = 0;
score = score + 1;
document.getElementById("score").outerHTML = score;
<!DOCTYPE html>
<head>
<title>Clicker Game</title>
<link rel="stylesheet" href="design.css">
<script src="code.js" type="text/javascript"></script>
</head>
<body>
<p>Cookies: <span id="score">0</span></p>
<img src="images/cookie.png" height="256px" width="256px">
</body>
</html>
I am trying to call the ID "score" in the HTML file to make sure that when I start the HTML file locally the number changes from 0 to 1.
Click on the number in the HTML file, which will change the value. You cannot change the value without a trigger in the HTML. Something needs to be clicked or changed for the value to appear.
Edit: And don't grab the outerHTML of the element. You are erasing the whole score span and replacing it with the count. Use textContent instead.
let elem = document.querySelector("#score");
elem.addEventListener("click", (e) => {
elem.textContent = Number(elem.textContent) + 1;
})
#score {
cursor: pointer;
}
<!DOCTYPE html>
<head>
<title>Clicker Game</title>
<link rel="stylesheet" href="design.css">
<script src="code.js" type="text/javascript" defer></script>
</head>
<body>
<p>Cookies: <span id="score">0</span></p>
<img src="images/cookie.png" height="256px" width="256px">
</body>
</html>
I made a simple "spacebar simulator" game with HTML and JavaScript. Every time the user presses spacebar an image is replaced with another one, and when the key is released it is reset to the original image.
I would like to add a counter to the page, which counts the number of times the user has pressed spacebar. The source code is below:
var myRealUrl = "./assets/spacebar.png";
$("body").on("keydown", function (e) {
if(e.which == 32){
$("#spacebar").attr("src", "./assets/spacebar_pressed.png")
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});
var button = document.getElementById('counter'),
count = 0;
button.onclick = function() {
count += 1;
button.innerHTML = "Click me: " + count;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
<span id="counter"><p></p></span>
</div>
<img src="assets/spacebar.png" id="spacebar">
<p>Pressed</p><p id="counter">0</p><p> times.</p>
<footer>
<p>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
So set up a page level variable and increment it in the keydown event handler.
Your attempt at the "button" click code didn't work because the p element that needed to be clicked had no content inside of it, so it wasn't rendering on the screen and therefore there was nothing to click on.
Also, you can't have more than one element with the same id and it's invalid to put a p inside of a span.
var counter = 0; // Variable to hold the count
var myRealUrl = "./assets/spacebar.png";
var count = document.getElementById('counter');
$("body").on("keydown", function (e) {
if(e.which == 32){
counter++; // Increment the counter
$("#spacebar").attr("src", "./assets/spacebar_pressed.png");
count.textContent = counter; // Log the count
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
</div>
<img src="assets/spacebar.png" id="spacebar">
<p>Pressed <span id="counter">0</span> times.</p>
<footer>
<p>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
First see this plunker
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div style="height:100px;width:100px; background-color:blue" draggable="true"></div>
<input disabled draggable="true"/>
<script>
</script>
</body>
</html>
In Chrome, both the blue square and the text input are draggable.
But in Safari, only the blue square is draggable. The input field does not work.
Is there a work around for Safari? I have tried wrapping the input with dives and making the div draggable and still does not work.
See this Forked Plunker for the functioning work around described below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script>
const selectInput = () => {
let target = document.getElementById('input');
target.className = "";
target.focus();
};
const disableInput = () => {
document.getElementById('input').className = "input-disabled";
};
</script>
<style>
.input-disabled {
pointer-events: none;
}
</style>
</head>
<body>
<h1>Hello Plunker!</h1>
<div style="height:100px;width:100px; background-color:blue" draggable="true"></div>
<div draggable="true" onmouseup="selectInput();">
<input id="input" class='input-disabled' onblur="disableInput();" />
</div>
</body>
</html>
The steps are:
Wrap the input in a draggable div
Disable mouse events on the input via the "pointer-events: none;" CSS property
Add an onmouseup callback to the div that selects the input, removes the "pointer-events: none;" CSS property, and assigns the input focus
Add an onblur callback to the input that re-adds the "pointer-events: none;" CSS property such that the div will be draggable again once the user leaves the input field
I have created a html webpage here:
http://diagrams.inse1d.info/wbt.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div id="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
<div id="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" id="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
Here is the jQuery code I wrote:
$(document).ready(function() {
$("h1").keypress(function(e) {
//get
wbtTitle = $('#wbtTitle').val();
// Write text after enter
if (e.which == 13) {
$("h1").text(wbtTitle);
}
});
$("span").keypress(function(e) {
//get
wbtNote = $('#wbtNote').val();
// Write note after enter
if (e.which == 13) {
$("span").text(wbtNote);
}
});
//Insert new WBT on button click
$("button").each(function() {
$(this).click(function() {
var wbtSet = $( "article" ).html();
$(wbtSet).insertAfter('section');
});
});
});
What I want to do is set the title and some note text using input boxes which works using jQuery. I then want to add a copy of the html into another article when the button is pressed without copying the inputs previously made with the possibility of setting new values when the article is cloned. The process should repeat over and over again.
Here is an image to help explain:
I am quite new to jQuery, I think you need to use a loop to fix this, I read that a .each() can be used http://api.jquery.com/jQuery.each/ but not quite sure.
Any help will be appreciated. Thanks.
I think I got your answer.
I changed the html a bit, because you duplicated some id's with your approach, that's not good. id's have to be unique on a page. I simply changed them to classes.
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
<div class="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" class="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
And of course the jQuery. I got rid of your first two functions because they had no purpose in this context.
$(document).ready(function() {
//Insert new WBT on button click
$("button").on('click', function() {
var title = $(this).prev().find('.wbtTitle').val();
var note = $(this).prev().find('.wbtNote').val();
var wbtSet = $(this).prev("section").html();
$(this).prev().find('.wbtTitle').replaceWith(title);
$(this).prev().find('.wbtNote').replaceWith(note);
$(this).prev("section").after('<section>' + wbtSet + '</section>');
});
});
Here is a working fiddel
Fixing the answer given by hitokun_s
window.onload = function() {
// Save a copy of the element wbtSet element on pageload
var wbtSet = $("article").clone();
$("button").each(function() {
$(this).click(function() {
// Append a new one to the holder of the wbSets
$(wbtSet).appendTo($('section'));
});
});
}
I think this is what you want to do.
window.onload = function() {
$("button").each(function() {
$(this).click(function() {
var wbtSet = $("article:first-child").clone();
wbtSet.find("input").val("");
$(wbtSet).appendTo($('section'));
});
});
}
I'm trying to create a Vista gadget, I've properly stored my Date1 variable and am trying to pull it:
<html>
<head>
<title>None</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
System.Gadget.settingsUI="settings.html";
System.Gadget.onSettingsClosed = settingsClosed;
function settingsClosed(p_event) {
// if OK button is clicked reload gadget
if (p_event.closeAction == p_event.Action.commit) {
// pull settings from here
text1.value=System.Gadget.Settings.readString("Date1");
}
}
</script>
</head>
<body>
<span class="stext">Last Serviced:<br />
<span id="text1">Nothing Yet</span>
</span>
</body>
</html>
Using the span tag, text1 does not display anything.
However, if i use an input tag:
<input id="text1" type="text" />
Then the data DOES get displayed. What am I doing wrong here?
text1.value=System.Gadget.Settings.readString("Date1");
span tags don't have a value property. try:
span1.innerHTML=System.Gadget.Settings.readString("Date1");
are you sure the <span> tag is to be inside the <script> tag?