I would like to change the content of a element with a button click and then have it return back to its original message. How Would i do this preferable with toggle class if possible.
<doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Day Practice</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
</head>
<body>
<h1> HotDogs</h1>
<input type=button id=button value=button>
<script>
$("#button").click(function(){
$("h1").html("Change to this");
});
</script>
This changes the header with a button, but I don't know how to revert it when I click on the button again. Maybe Toggle Class, I don't know.
this should solve:
$( "#button" ).toggle(function() {
$("h1").html("Change here");
}, function() {
$("h1").html("Revert back here");
});
Set a flag to toggle and check, and store the old text whenever you change it. An example:
var flag = false;
var old_text = "";
$("#button").click(function () {
if (flag) {
$("h1").html(old_text);
} else {
old_text = $("h1").html();
$("h1").html("Change to this");
}
flag = !flag;
});
You can try this:
var alternate_text = "Change to this";
$("#button").click(function(){
var temp = $("h1").html()
$("h1").html(alternate_text);
alternate_text = temp; // Switch the two instances of text.
});
Since you prefered to do this with toggleClass(), here you go:
$(document).ready(function(){
var oldContent;
$("#button").click(function(){
if($(".newCont")[0]){
$("h1").html(oldContent);
} else {
oldContent = $("h1").html();
$("h1").html("New text here");
}
$("h1").toggleClass("newCont");
});
});
Related
The JavaScript below causes some text to blink on a web page. When I use it with an anchor tag on Blogger it only acts like a link and does not blink. If it is not an anchor tag it will blink. Is there any way to get around this on Blogger?
<html>
<head>
<script type="text/javascript">
function blinker()
{
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
}
}
</script>
</head>
<body onload="blinker();">
<div id="blink">GOOGLE</div>
</body>
</html>
function blinker() {
if (document.getElementById("blink")) {
var d = document.getElementById("blink");
d.style.color = (d.style.color == 'red' ? 'white' : 'red');
setTimeout('blinker()', 500);
}
}
blinker();
GOOGLE
<div id="blink">GOOGLE</div>
<script type="text/javascript"> function blinker() {
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
} } </script>
<body onload="blinker();">
<div id="blink"> GOOGLE</div> </body>
Basically, you need to add an href element.
Finally found answer myself
<script type="text/javascript">
function blinker()
{
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
}
}
</script>
<body onload="blinker();">
<div id="blink">GOOGLE</div>
</body>
Thanks everybody for helping
Maybe try this. It uses JavaScript to treat the div a link. Looks like StackOverflow blocks that though, which is understandable. It should still work for you on other pages. Note however that the user won't see what's on the other side if they hover their mouse over it, and the cursor won't change to indicate it is clickable.
function blinker() {
if (document.getElementById("blink")) {
var d = document.getElementById("blink");
d.style.color = (d.style.color == 'red' ? 'white' : 'red');
setTimeout('blinker()', 500);
}
}
function goto(page) {
document.location = page;
}
blinker();
<div onclick="goto('https://www.google.com/')" id="blink">GOOGLE</div>
I want to display a button for an HTML document, and each time this button is clicked it increments.
After incrementation I want that number(which is the counter to be saved) for when the file is accessed again the counter shows for the users.
What I read is that there is a function called addBtn, which on click increments how is it possible to save the incremented value
addBtn.on("click", function() {
counter.html(++value);
return;
});
That would be something like this. Just replace the "your_textfield" with your selector.
var counter = 1;
function increase(){
var textBox = document.getElementById("your_textfield");
textBox.value = counter;
counter ++;
}
addBtn.on("click", function() {
var counter=$(this).html();
counter+=1;
$(this).html(counter);
return;
});
If you want to do it with a file you need a php to do it for you
but this one is a simple one using localstorage of web browers
you can check the console log of your browser
where in its shows a object storage
<html>
<head>
<style>
.overlay {
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p class="display"></p>
<input type="button" class="add" value="click me">
<script type="text/javascript">
$(document).on('ready', function(){
var count = 0;
var storage = window.localStorage;
var disp = $('p.display');
if (storage.getItem('count')) {
count = parseInt(storage.getItem('count'));
disp.html(count);
}
$('.add').on('click', function(){
if (storage.getItem('count') != null) {
count = parseInt(storage.getItem('count'));
}
count++;
storage.setItem('count', count);
disp.html(count);
console.log(storage);
});
});
</script>
</body>
</html>
Long story short i need to edit a textarea after it was created by a wordpress plugin, i can set the id and default value, but i can't set events or anything else, i want the default value to disappear after the user clicks to enter the phone number.
I have tried several ways of doing this without luck, some are:
<script type="text/javascript">
$(document).ready(function(){
// Your code goes here
function clearOnInitialFocus ("telid01") {
var clearedOnce = false;
document.getElementById("telid01").onfocus = (function () {
if (clearedOnce == false) {
this.value = '';
clearedOnce = true;
}
})
}
window.onload = function() { clearOnInitialFocus('telid01');}
});
</script>
Also tried
<script type="text/javascript">
$(document).ready(function(){
document.getElementById('telid01').addEventListener('focus', function() {
this.value = "";
});
});
</script>
this works in the console but not on page load:
document.getElementById('telid01').addEventListener('focus', function() {
this.value = "";
Since you're using jQuery, you may as well use jQuery's event binding, like so:
$(document).ready(function(){
var clearedOnce = false;
$(this).on('focus', '#telid01', function () {
if (!clearedOnce) {
$(this).val('');
clearedOnce = true;
}
});
});
Edit: If you attach the event to 'document' then pass the id as a selector to on() it should work, and should be able to attach the event even without the field existing on the page yet. See: http://api.jquery.com/on/
You are using function parameters in a strange way.
I've tried the following code that is based on yours and it works fine.
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Your code goes here
var clearedOnce = false;
document.getElementById("myTest").onfocus =
function () {
if (clearedOnce == false) {
this.value = '';
clearedOnce = true;
}
};
});
</script>
</head>
<body>
<input id="myTest" value="placeholder" />
</body>
</html>
I am trying to create a button in a function declared in an external javascript file. With the html file (in some sense the "main" file), I am trying to access this button and assign click listeners. I am not able to do so. Please see below for the code I have so far.
testDialogJS.js:
/**
* The JS here will be referenced from another file.
*/
function creator() {
console.log("creator.");
var btn = document.createElement("BUTTON");
var text = document.createTextNode("Click me!");
btn.setAttribute("id", "Button");
btn.appendChild(text);
}
testDialog.html:
<html>
<head>
<style>
.hlight{background-color:#ffcc00; }
textarea {
width:100%;
height:100%;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> -->
<script type="text/javascript" src="testDialogJS.js"></script>
<script type="text/javascript">
window.onload=function() {
console.log("Window has been loaded.");
creator(); //this function is elsewhere.
var btn = document.getElementById("Button");
if(btn == null) {
console.log("Button is null.");
} else {
console.log("Button is not null.");
btn.onclick=function() {
console.log("Hello.");
}
}
}
</script>
</head>
<body>
</body>
</html>
You have not appended your button to the document. So this returns null when you try to select the button using document.getElementById("Button")
Add the following statement in creator() like this
function creator() {
console.log("creator.");
var btn = document.createElement("BUTTON");
var text = document.createTextNode("Click me!");
btn.setAttribute("id", "mybtn");
btn.appendChild(text);
document.body.appendChild(btn);
}
Demo
I noticed my users sometimes click the buttons twice, maybe no one told them one click is enough.
What's the best way to prevent the double-click?
I basically hide the button and show a "loading" gif, but that apparently is not enough...
Usually disabling/hiding/replacing the button should work. If they are real fast, try setting a variable to false when your script starts, return if it's true, set it to true after the first click.
var alReadyClicked = false;
function click(){
if (alreadyClicked)
return false;
alreadyClicked = true;
}
Don't forget to set it to false when the user can click again.
If they are clicking fast enough to fire the double click event, return false.
ondblclick="return false"
EDIT: This will not cancel the single click event so problem would still exist.
I just found out the jQuery funcion .one(), that may be useful great for this kind of purpose! great!
The equivalence to JQuery .one() may be the once option on AddEventListner like:
function doSubmit () { /* your code */ }
btn = document.getElementById ('foo');
btn.addEventListener ('click', doSubmit, {once: true});
Reference: javascript - JS equivalent for jQuery one() - Stack Overflow
Another example using a flag
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test dbl click</title>
</head>
<body>
<button id="btn1">Click Away</button>
<div id="out"></div>
<script type="text/javascript">
function addMessage( msg ){
document.getElementById("out").innerHTML += (new Date().toTimeString()) + " : " + msg + "<br/><br/>";
}
function singleClick(){
addMessage( "single");
}
function addDoubleClickProtection( element, fncToCall ){
var isClicked = false;
var timer = null;
element.onclick = function(){
if(!isClicked){
isClicked = true;
timer = window.setTimeout( function(){ isClicked = false; }, 200);
return fncToCall();
}
}
}
addDoubleClickProtection( document.getElementById("btn1"), singleClick );
</script>
</body>
</html>
Simple method by counting the submit button click and with minimum decoration will:
<script>
var click_count = 0;
function submit_once () {
document.forms.A.elements.cmd.forEach(
function(e,i,l){e.style.color="#888";});
return (click_count++ > 1);
}
function reset_count () {
document.forms.A.elements.cmd.forEach(
function(e,i,l){e.style.color="unset";});
click_count = 0;
}
</script>
<form name="A">
<button type="submit" name="cmd" value="doAdd"
onclick="return submit_once();">Do add</button>
<button type="submit" name="cmd" value="doDel"
onclick="return submit_once();">Do delete</button>
</form>
You can create a util function once which will take CB function. And all logic handles seamlessly. You don't have to create a global variable to count or update.
function once(cb) {
let once = false;
return (...args) => {
!once && cb(...args);
once = true;
};
}
// How to use it.
// Create/bind function
const log = once((data) => {
console.log(data);
});
// Use it
Promise.resolve("hellowold").then(log).then(log);
Above line print only once.