newbie to java script , I want to do like when any one click on first Button,then second button is disabled for 30 seconds , after the enabled of second button, click on second button and third button visible to the user. I know simple disable enable buttons on tutorials Thanks.
<!DOCTYPE html>
<html>
<body>
<input type="button" id="myBtn" value="My Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
}
</script>
</body>
</html>
Use setTimeout function to do it.
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 5000);
}
</script>
Hope it works.
Use setTimeout() function and variables to flag click status:
setTimeout("myFunction();", 30000);
see this plunker http://embed.plnkr.co/ZUmGoGEr2TYHlfPhUJgK/preview
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" id="myBtn" value="My Button" onclick="document.getElementById('thirdBtn').style.display='block'">
<input type="button" style="display:none;" id="thirdBtn" value="Third Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById('thirdBtn').style.display='none';
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 30000);
}
</script>
</body>
</html>
Related
How can I open the same link 10 times in 10 tabs by just clicking on button?
Is php required to do this and if so can you provide a code sample?
Below is an example of my code:
<html>
<body>
<script language="javascript">
function kishan()
{
window.open('http://stackoverflow.com','_blank');
}
</script>
<input type="button" value="ok" onclick="kishan()">
</body>
</html>
Just add multiple window.open to your code, or loop through it 10 times
Inside your function add a loop as follows:
function kishan()
{
for(i=0; i<10; i++){
window.open('http://stackoverflow.com','_blank');
}
}
Make sure this is not a spam though!
You can do it this way,
<html>
<body>
<script language="javascript">
function open_10_tab() {
for (var i = 0; i < 10; i++) {
window.open('http://stackoverflow.com', '_blank');
}
}
</script>
<form>
<input type=button value="Open Windows" onclick="open_10_tab()">
</form>
</body>
</html>
</html>
I Find my answer.
just create a function that calls open()
and call that function multiple time in loop or any where you want.
just allow browser to not block pop-up ads.
<html>
<body>
<script language="javascript">
function kishan(){
for(i=0;i<=10;i++){
open()
}
}
function open() {
window.open('http://stackoverflow.com','_blank');
}
</script>
<input type="button" value="ok" onclick="kishan()">
</body>
</html>
How can I display multiline comments or messages within the browser? For example, if I wanted a user to click a box and have the browser display multiple lines in the format of question #1-10:
<!DOCTYPE html>
<html>
<body>
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Question #1";
}
</script>
</body>
</html>
Ultimately, when the user clicks the "Click Me" button, questions should display like this:
Question #1
Question #2
Question #3
Question #4
and so on....
Also, do different browsers behave differently when trying to implement this?
Declare global a variable, clickcount then increment it whenever running myFunction.
On more thing you should remind is keeping comment between script tag avoiding some parsing errors among browsers like firefox, chrome, IE etc.
Here is my solution for you.
<!DOCTYPE html>
<html>
<body>
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
<script language="JavaScript">
<!--
var clickcount = 1;
function myFunction() {
document.getElementById("demo").innerHTML = "Question #" + clickcount++;
}
-->
</script>
</body>
</html>
And, You can use a setInterval function, if you want some effect like auto increment the number at some period of time.
Here is another one with 10 iteration every time you just click the button.
<!DOCTYPE html>
<html>
<body>
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="try10Iter()">Click Me!(10 iteration)</button>
<button onclick="myVar = setTimeout(try10Iter, 500)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
<p id="demo">Please Take Notes!</p>
<script language="JavaScript">
<!--
var clickcount = 1;
var countVar;
function stopIterAt(condition)
{
if(clickcount == condition)
{
clearInterval(countVar);
clickcount = 0;
}
}
function myFunction() {
document.getElementById("demo").innerHTML = "Question #" + clickcount++;
stopIterAt(11)
}
function try10Iter()
{
countVar = window.setInterval(myFunction, 500);
}
-->
</script>
</body>
I borrowed some code from the site.
Regards,
You could add <br> tags to your innerHTML value:
document.getElementById("demo").innerHTML = "Question #1<br>Question #2<br>Question #3<br>Question #4";
var count = 1;
function myFunction() {
document.getElementById("demo").innerHTML += "<br/>Question #"+(count++);
}
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
You can use:
document.getElementById("demo").innerHTML += "<br/>Question #" + ++question;
where question is a global variable initialized to zero - see demo below:
var question = 0;
function myFunction() {
document.getElementById("demo").innerHTML += "<br/>Question #" + ++question;
}
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
I am new to HTML and javascript. I have written below code to execute over() of javascript when the mouse hovers over a button but the code is not working.
Kindly suggest some changes in the code to get the it running.
<html>
<head>
<script type="text/javascript">
function over()
{
document.getElementById("b1").value="You have hovered mouse over me";
}
</script>
</head>
<body>
<button onmouseover="over()" id="b1">Hover mouse over me</button>
</body>
You need to replace text with innerHTML
like this
<html>
<head>
<script type="text/javascript">
function over()
{
document.getElementById("b1").innerHTML="You have hovered mouse over me";
}
</script>
</head>
<body>
<button onmouseover="over()" id="b1">Hover mouse over me</button>
</body>
You should change the innerHTML of button element
document.getElementById("b1").innerHTML = "You have hovered mouse over me";
Your script works on <input type="button">
Your code does work.
The thing is, you will not see value change anywhere in the DOM. for that you should use <input type='submit' value='Hover mouse over me'/> instead, or change innerHTML of your <button> if you want to use a <button>.
.innerHTML on <button>
function over()
{
document.getElementById("b1").innerHTML = "You have hovered mouse over me";
}
<button id="b1" onmouseenter="over()">Hower me</button>
value on <input type="submit">
function over()
{
document.getElementById("b1").value = "You have hovered mouse over me";
}
<input id="b1" type="submit" onmouseenter="over()" value="Hower me">
I am looking for the JavaScript code that can assist me in getting something similar to the button onclick event. Please take a look at the code below.
Javascript code
<script type='text/javascript'>
function myPopup() {
var overlay = $('<div id="overlay"></div>');
$('.x').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
var obj = document.getElementsByClassName('clickLink');
// alert("name");
myScript = function() {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
};
obj[0].addEventListener("click", myScript);
}
</script>
HTML Code
<div class='popup'>
popup content here
</div>
<div id='container'>
<button class='clickLink'>
Click Here to See Popup!
</button>
<!-- this is working 5ne i called class in javascript -->
<button type="submit" onclick='myPopup();'>
Click Here to See Popup!
</button>
<!-- but developers need like onclick event -->
</div>
</body>
This popup script is working fine but I need an onclick event like button onClick='myfunction()'
please any one help me Thanks
If I understand correctly you want to know how onclick event works in JavaScript, if that is the case as your question is not entirely clear, try something to the effect of the following:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
Guys Below is my Script but It is not working can anyone tell why???
Wanna check? Please use This Script at:- http://calcus.host56.com/make_your_own_link.htm
<html><head>
<title>Hello</title>
<style>
a {color:black;font-size:23;}
textarea {color:white;font-size:1;border:none;}
</style>
<script>
function select8()
{
document.getElementById("demo").select();
}
</script>
</head>
<body>
<script>
function myFunction()
{
var x;
var name=prompt("Please enter your Facebook username","");
if (name!=null)
{
x="https://www.facebook.com/dialog/apprequests?api_key=148768088503846&app_id=148768088503846&data=%7B%7B"+"category"+"%3A"+"virtue"+"%7D%7D&display=popup&filters"+"&frictionless=false&locale=en_US&message=Here+is+a+Virtue+for+you+Mihir+Gupta%21%21+By+Chirag+Jain&next=http%3A%2F%2Fvolcanoisland.brokenbulbstudios.com%2F%252Ff312818684%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df18dc1ab6%26result%3D%2522xxRESULTTOKENxx%2522"+"&sdk=joey&title=Send+your+friends+a+daily+gift&to="+name;document.getElementById("demo").innerHTML=x;
}
}
</script>
<button onclick="myFunction()" accesskey="v">Click Here to Make Your Own Virtue Link </button>
<br>
<textarea id="demo">Your Url Here</textarea>
<button onclick="select8()" accesskey="x">Entered username?? <br>Now Click here and press Ctrl + c to copy the link </button>
Try this jsfiddle. You must define myFunction() in the head section.
<html>
<head>
<title>Hello</title>
<style>
a {color:black;font-size:23;}
textarea {color:white;font-size:1;border:none;}
</style>
<script>
function myFunction()
{
var x;
var name=prompt("Please enter your Facebook username","");
if (name!=null)
{
x="https://www.facebook.com/dialog/apprequests?api_key=148768088503846&app_id=148768088503846&data=%7B%7B"+"category"+"%3A"+"virtue"+"%7D%7D&display=popup&filters"+"&frictionless=false&locale=en_US&message=Here+is+a+Virtue+for+you+Mihir+Gupta%21%21+By+Chirag+Jain&next=http%3A%2F%2Fvolcanoisland.brokenbulbstudios.com%2F%252Ff312818684%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df18dc1ab6%26result%3D%2522xxRESULTTOKENxx%2522"+"&sdk=joey&title=Send+your+friends+a+daily+gift&to="+name;document.getElementById("demo").innerHTML=x;
}
}
function select8()
{
document.getElementById("demo").select();
}
</script>
</head>
<body>
<button onclick="myFunction()" accesskey="v">Click Here to Make Your Own Virtue Link </button>
<br>
<textarea id="demo">Your Url Here</textarea>
<button onclick="select8()" accesskey="x"> Entered username?? <br />Now Click here and press Ctrl + c to copy the link </button>
</body>
</html>