We Keep Coding

How to make a button disappear and reappear after 'x' seconds?

How can I make this code;
<input onclick="myFunction();" alt="click">Click Me!</button>
Hide for a few seconds, then re-appear after 'x' seconds? (This button works fine if that changes anything)
I'd like to stick with bare HTML, but if I need Javascript that's fine. No other solutions on SO work for me. Thanks.
edit:
<link rel="stylesheet" type="text/css" href="formalign.css">
<script type="text/javascript" src="trinit5.js"></script>
<button class="button" id="btn" input onclick="doSingle();" alt="Summon">Summon</button>
<img id="canvas"></img>
<div class="element"></div>
where do i embed the part?

input tag(it is standalone tag) and a button tag(it is a paired tag) and if you want a button than you can try two things:
1- assign button to the type attribute
<input type="button" id="btn" onclick="myFunction()" value="Click Me">
2-use a button tag it also has type attribute but by default button is assigned to type attribute
<button id="btn" onclick="myFunction()">Click Me!</button>
Here in the js i have written a function
JS:
<script>
function myFunction()
{
document.getElementById('btn').style.display ='none'; //first hide the button
setTimeout(function(){ //using setTimeout function
document.getElementById('btn').style.display ='inline'; //displaying the button again after 3000ms or 3 seconds
}
,3000);
}
</script>
NOTE:
The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.
Tip: 1000 ms = 1 second.
Tip: The function is only executed once

Hello my friend,
This can be accomplished fairly easily using a setTimeout in JavaScript. I've created a code snippet below which you can use as an example. You can change the number after the comma (1000) in the setTimeout to reflect how many thousandths of a second you want the button to have disappeared for.
Cheers and best of luck to you!
document.getElementById("button").onclick = function(){
doSingle();
document.getElementById("button").style.visibility = "hidden"
setTimeout(function(){
document.getElementById("button").style.visibility = "visible"
}, 1000)
};
function doSingle() {
// your function
};
<button class="button" id="button" alt="Summon">Summon</button>

Bare HTML won't do it I am afraid. You'll need a timer. Something like this maybe?
<button id="btn" onclick="tempInvisible(this);">Click</button>
<script>
function tempInvisible(btn) {
btn.style.display = 'none';
setTimeout(function() {
btn.style.display = 'block';
}, 10000);
}
</script>

removeProp() not working

I have an input and I want to disable it but it doesn't work at all. Even phpstorm says the function doesn't exist for some reason.. I thought it's a problem with phpstorm, but I tried it in Chrome and it doesn't work.
Is there any alternative or am I doing something wrong? I must point out that button.css('pointer-events', 'none'); works but removeProp doesn't for some reason..
function waitComment() {
var button = $(".btn-primary");
button.css('pointer-events', 'none');
setTimeout(function(){
button.remove('pointer-events');
}, 3000)
}
<input type="submit" class="btn btn-primary" value="Comment" name="comment" id="#comment" class="comment" onclick="waitComment()">

if you want to disable button, why don't you use disabled property?
function waitComment() {
var button = $(".btn-primary");
button.prop('disabled', true);
setTimeout(function(){
button.prop('disabled', false);
}, 3000)
}

The proper way to achieve your goal is,
CSS
.pointer{
pointer-events: none;
}
Jquery:
function waitComment() {
var button = $(".btn-primary");
button.addClass('pointer');
setTimeout(function(){
button.removeClass('pointer');
}, 3000)
}
Why .removeProp() didn' work?
Jquery .removeProp() is for Html attributes/properties not for CSS properties.
Please find the Api reference of .removeProp

In what way is disabled bugged?..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function waitComment() {
var button = $(".btn-primary");
button.attr('disabled','disabled');
}
</script>
<input type="submit" class="btn btn-primary" value="Comment" name="comment" id="#comment" class="comment" onclick="waitComment()">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function waitComment() {
var button = $(".btn-primary");
button.css('pointer-events', 'none');
button.css('color', 'red');
setTimeout(function () {
button.css('pointer-events','');
button.css('color', 'blue');
}, 3000)
}
</script>
</head>
<body>
<input type="submit" class="btn btn-primary" value="Comment" name="comment" id="#comment" class="comment" onclick="waitComment()">
</body>
</html>
here I added a effect on button as follows..
Initially button text color will be Black
on click button color will change to Red
on time out button color will change to Blue
Hope this make help you...
Thanks... :)

Check what exatly button clicked, when multiple buttons with the same selector on page

I have a two buttons with the same selector class. When I do this:
$('.my_button').click(function() {
console.log(1);
});
, and then click on the button it log 1 two times, like I clicked both buttons instead single. So my question is: There exists some way in JS to get only that button what I clicked, without assign unique selector like id. I am newbien in JS, so can somebody explain me? I found related issue here. Thanks!
Edit:
I make buttons a little bit different. And yes, it returns only single button, but why click trigger works two times. Console log log two times.

Every event listener receives the event, which carries the event target. Try the below example.
$('.my_button').click(function(e) {
console.log(e);
console.log(e.currentTarget);
console.log($(e.currentTarget));
});

use this inside your function code
$('.my_button').on('click',function() {
var tempContainer=$(this).parent();
alert($(tempContainer).html()); // you ll see that you are showing the code where exists your clicked button
});

Assign different id to your buttons
$(".my_button").on("click",function(){
console.log($(this).attr("id"))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="my_button" id="test" value="Test"/>
<input type="button" class="my_button" id="test2" value="Test-2"/>

Try this:
<button class="my_button">Content1</button>
<button class="my_button">Content2</button>
<script>
$( ".my_button" ).click(function( event ) {
console.log(1);
});
</script>
https://jsfiddle.net/nt9ryeyr/5/

Try this:-
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".p").click(function(e){
alert($(e.currentTarget).attr("value"));//button text on which you clicked
});
});
</script>
</head>
<body>
<input type='button' class="p" value='test'/>
</body>
</html>

if your html is like this
<button class="my_button">Test</button>
<button class="my_button">Test1</button>
then use this script
$('.my_button').click(function() {
if(this.innerHTML ==="Test")
console.log(1);
else
console.log(2);
});
or if your html is like this
<input type="button" class="my_button" value="Test"/>
<input type="button" class="my_button" value="Test1"/>
then use this script
$('.my_button').click(function() {
if($(this).val() ==="Test")
console.log(1);
else
console.log(2);
});

localStorage clears screen

I'm testing out localStorage to see if it can be used in my app, but when I try to store data from a text input box to it, the screen goes blank. How can I fix this? Here is the code:
<html>
<head>
<script type="text/javascript">
function write() {
localStorage.setItem('item', document.getElementById('input').value);
}
function read() {
var data = localStorage.getItem('item');
document.getElementById('display').innerHTML = data;
}
</script>
</head>
<body>
<input id="input" type="text" />
<button type="button" onclick="write()">
Write
</button>
<p id="display">
Display
</p>
<button type="button" onclick="read()">
Read
</button>
</body>
</html>

change your function name from write to something else. it sounds like you are accidentally invoking document.write, which would blank out your entire page.

You cannot use a function called write on the global (document) namespace ... call it something else and it works fine
<input id="input" type="text" />
<button type="button" onclick="somethingelse();">
Write
</button>
<p id="display1">
Display
</p>
<button type="button" onclick="read()">
Read
</button>​
function somethingelse() {
localStorage.setItem('item', document.getElementById('input').value);
}
function read() {
var data = localStorage.getItem('item');
document.getElementById('display1').innerHTML = data;
}​
Working example here

The code inside html event handlers is ran effectively like:
with(document) {
with(this) {
write();
}
}
so your write is shadowed (it calls document.write). You can simply refer to the correct write with window.write():
<button type="button" onclick="window.write()">
Ultimately it's better not to use inline html events at all. A simple button.onclick = write would have worked, where button is reference to the element.

Javascript function to change button colour

Can someone show me whats wrong with this:
<html>
<script type = "text/javascript">
function colourGreen()
{
document.getElementById("button1").style.bgColor = 0xFFFF00;
}
</script>
<body>
<form action="">
<div id = "button1">
<input type="button" value="Colour">
</div id>
<div id = "button2">
<input type="button" value="Price up" onclick = "colourGreen()">
</div id>
<div id = "button3">
<input type="button" value="Price down">
</div id>
</form>
</body>
</html>

document.getElementById("button1").style.backgroundColor = '#FFFF00';

Try:
document.getElementById("button1").style.backgroundColor = '#00ff00';
It is backgroundColor not bgColor

You can create a css rule and change the className of the button to link to that rule.
<style type="text/css">
.buttonColor{
background-color: green;
}
</style>
<script type ="text/javascript">
function colourGreen() {
document.getElementById("button1").className = "buttonColor";
}
</script>
That way if you for some reason decide to change the color or the background you will not have to change it on every page. You will be able to change that one css file.

I'd try
.style.backgroundColor = 0xFFFF00;

I assume your divs are only as big as your buttons and are therefore hidden by the buttons themselves. Change the colour on you button itself instead of the div?
A neater and more reliable way to to edit css of items is using jquery selectors. $("#button1").css("background-color","#ff0000");
Be sure to include the jquery .js file before trying this or you'll get an object expected error.