The title pretty much says it all: I need help in making a button that will only appear 5 seconds after the page loads.
this is the code i'm working with:
<html>
<body onload="setTimeout(showStuff, 5000)">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class=login align=center>
<font size=13 face=helvetica> You're doing that too much. </font><br> <br> <br>
<font size=5 face=helvetica>
You have entered the wrong username/password too many times <br>
<br><br>
<br><br>
Click "OK" to go back to the log-in page <br> <br>
<p id="Button"><input type=submit onclick="myFunction()" id="Button" value="OK"> </p>
<script>
document.getElementById("Button").style.visibility = "hidden";
function showStuff(Button){
document.getElementById("Button").style.display = "inline";}
function myFunction() {
window.location = "project.html"}
</script>
</div> </font>
</body>
</html>
This is probably what you need
<body>
<button id="some-button">button</button>
<script>
document.getElementById("some-button").style.display = "none";
function showStuff() {
document.getElementById("some-button").style.display = "inline";
}
function myFunction() {
window.location = "project.html"
}
setTimeout(showStuff, 5000);
</script>
</body>
</html>
Things you should know
* The html element <font> is deprecated
* Is bad practice to mix Javascript code inline with html.
* Do not duplicate html elements ids, they should be unique (Thanks Calvin Nunes)
How to fix your code
* Close the second <font> element correctly and delete the unnecesary id of the button.
* If you use display = 'inline', then to hide the element use display = 'none'
The working code
<html>
<body onload="setTimeout(showStuff, 5000)">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class=login align=center>
<font size=13 face=helvetica> You're doing that too much. </font><br> <br> <br>
<font size=5 face=helvetica>
You have entered the wrong username/password too many times <br>
<br><br>
<br><br>
Click "OK" to go back to the log-in page <br> <br>
</font>
<p id="Button">
<input type=submit onclick="myFunction()" value="OK"> </p>
<script>
document.getElementById("Button").style.display= "none";
function showStuff(){
document.getElementById("Button").style.display = "inline";
}
function myFunction() {
window.location = "project.html"
}
</script>
</body>
</html>
<script>
function showStuff(){ // no argument needed
document.getElementById("Button").style.display = "inline";
}
</script>
<body onload="javascript:setTimeout(function(){ showStuff(); }, 5000)">
function definition should be before function call
in function showstuff no argument is needed. a use function() inside settimeout to execute correctly . if not it will just execute without delay .
Well using jquery you can have the button within the div, something like
<div id="div_id">Button here</div> and set time out to display it
setTimeout(function(){
$('#div_id').show();// or fade, css display however you'd like.
}, 5000);`
or with Javascript:
function showItbutton() {
document.getElementById("div_id").style.visibility = "visible";
}
setTimeout("showItbutton()", 5000); // after 5 secs
First, use DOMContentLoaded event and then write the code within that handler to handle this logic:
<script>
window.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
// Assuming button has id 'myButton'.
document.querySelector('#myButton').style.display = 'none';
}, 5000);
});
</script>
Remember DOMContentLoaded is the key to detect page load. You can use onload depending on your situation. Refer this to understand the difference between the two.
setTimeout() receives milliseconds, not seconds.
So 5000 it will work for you.
JS:
setTimeout(showStuff, 5000);
console.debug('Start page');
function showStuff(Button){
console.debug('Display');
document.getElementById("Button").style.display = "inline";
}
HTML:
<button id="Button" style="display:none">Button</button>
Related
I got a problem with one of the sites with JavaScript, and I need to automate a click and then find out how many turns I got before I run out of them. As in, for example, let's say I have 8 turns. So what I would need is to automatically have JavaScript to trigger said div id, 8 times. (As in, I add like this)
Link:https://jsfiddle.net/yxsgp8tc/
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<label><input type="text"/>00-99</label>
<button>
trigger it
</button>
</form>
</body>
in plain javascript, you would target unique elements (using an id) by using document.getElementById('<element_id'). If you wanted to target a class, you would document.querySelector('.<class_name>') for the first instance of the class, or document.querySeletorAll('.<class_name>')
Also, your input tag was misspelled "imput", and is a singleton tag so you don't have to close it off.
Assuming you wanted a way to trigger a click event, here's a basic example:
<head>
<script>
const test = document.getElementById('test');
const trigger = document.getElementById('trigger')''
test.addEventListener('click', () => {
const num_test = document.getElementById('num_tests').value;
for (let i = 0; i < num_test; i++) {
trigger.click();
}
});
trigger.addEventListener('click', () => {
console.log('trigger clicked');
});
</script>
</head>
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<input type="text" id="num_tests" value="">
<button id="trigger">
trigger it
</button>
</form>
</body>
https://jsfiddle.net/qr1z3d6e/2/
first in the jsfiddle.net link there are some errors such as imput instead of input.
I haven't tested it, but if I understand correctly is it something like this? try it.
<body>
<input id="myinput" type="text">00-99</input>
<button id="clickme">
</body>
<script>
var button = document.getElementById("clickme"),
count = 99;
var myInput = document.getElementById("myinput")
button.onclick = function(count){
count -= 1;
myInput.innerHTML = "00 " + count;
};
</script>
I am getting an error when attempting to run a function once a checkbox is being checked. The above error appears consistently each time I am attempting to run it. Heres the code:
HTML:
<body>
<header>
<div class="header_container">
<h1>Trivia Quiz</h1>
<p>Welcome to the Trivia Quiz 2020!</p>
<p>The aim of the game is to get as many questions correct as possible!<br> The topics range from film to geography, so good luck!</p>
<div class="header_settings" id="header_settings">
<input type="checkbox" id="checkbox" onclick="TimeToggle()">
<label for="TimeToggle">Time Limit</label><br>
<input type="text" id="Timer" name="Timer" placeholder="Seconds" id="header_input">
</div>
<button>Start</button>
</div>
</header>
</body>
And Javascript (stored externally, linked in the head of the HTML document.):
var header_input = document.getElementById("header_input");
var header_settings = document.getElementById("header_settings");
var checkbox = document.getElementById("checkbox");
function TimeToggle() {
if (checkbox.checked) {
header_settings.style.height = "3%";
setTimeout(function () {
header_input.style.display = "none";
}, 500);
} else {
header_settings.style.height = "10%";
setTimeout(function () {
header_input.style.display = "block";
}, 500);
}
}
The code is intended to toggle the height of the div named "header_settings", and the display setting of the input named "header_input" depending on whether the checkbox is checked.
I would appreciate any pointers regarding how this is not working, I have tried a lot. Thanks :)
Is this what you are trying to do ? You can use an onchange function and pass this as an argument and check if in your toggle function if input is checked or unchecked.
Also, you have had two id selectors on your input which is not possible.
In addition, please ensure that your scripts.js is loading just added before the </body> end tag
Add this code as your HTML input
<input type="checkbox" id="checkbox" onchange="TimeToggle(this)">
Live Working Demo:
function TimeToggle(el) {
var header_input = document.getElementById("header_input");
var header_settings = document.getElementById("header_settings");
var checkbox = document.getElementById("checkbox");
if (el.checked) {
header_settings.style.height = '50px';
setTimeout(function() {
header_input.style.display = "none";
}, 500);
} else {
header_settings.style.height = '100px';
setTimeout(function() {
header_input.style.display = "block";
}, 500);
}
}
<body>
<header>
<div class="header_container">
<h1>Trivia Quiz</h1>
<p>Welcome to the Trivia Quiz 2020!</p>
<p>The aim of the game is to get as many questions correct as possible!<br> The topics range from film to geography, so good luck!</p>
<div class="header_settings" id="header_settings">
<input type="checkbox" id="checkbox" onchange="TimeToggle(this)">
<label for="TimeToggle">Time Limit</label><br>
<input type="text" name="Timer" placeholder="Seconds" id="header_input">
</div>
<button>Start</button>
</div>
</header>
</body>
Your problem is a very common one. You are trying to get the html elements using document.get... before the DOM has loaded. You need to wrap those document fetches in the onload listener for the window:
let checkbox;
window.onload = function() {
checkbox = document.getElementById();
};
function TimeToggle() {//...}
Place the external JS to at the end. Just before</body>. And your problem will be solved.
Somewhat like
<body>
<!--Your HTML content here-->
<script src = "External Js.js"></script>
</body>
I need help coding in HTML. I have tried many different ways of coding this button. The button is on the webpage now but will not change the background color of the web page.
<html>
<body>
<button type="button" onclick="myFunction()"> Blue</button>
<script>
function myFunction(){
document.getElementByld("background").sytlecolor="blue";
</script>
</body>
</html>
I would recommend you to go through Javascript DOM and HTML
function myFunction(){
document.getElementsByTagName("body")[0].style.background="blue";
}
<html>
<body>
<button type="button" onclick="myFunction()"> Blue</button>
</body>
</html>
Try this:
var isBlue = false;
document.querySelector("button").addEventListener("click", function(){
if(isPurple){
document.body.style.background= "white";
}
else{
document.body.style.background= "blue";
}
isBlue = !isBlue
})
This will not only change the background colour but will create a button that toggles it.
Try this
<body>
<button type="button" onclick="myFunction()">Click to change color</button>
<script>
function myFunction(){
document.body.style.background = "aqua";
}
</script>
</body>
</html>```
background is not a document object. It is an html dom object.
Add this line in HTML Body
<a onclick="changecolor('navy')" id="navy">#0E2A36</a>
You can add customize color in CSS like
#navy{
background:#0E2A36;
}
Then add JavaScript
<script type="text/javascript">
function changecolor(id) {
document.body.style.background = document.getElementById(id).innerHTML;
}
</script>
There are few spelling mistakes but this should explain
1.make the element a variable.
2. set that variable with .style.background = "blue"
spelling mistakes:
sytle = style
getElementByld = getElementById
<html>
<body>
<div id="background">
<button type="button" onclick="myFunction()">Blue</button>
</div>
<script>
function myFunction() {
//get the element
const background = document.getElementById("background");
// set it to blue
background.style.background = "blue";
}
</script>
</body>
</html>
hope this helps.
You have two errors here:
You are selecting an element by id, but that element doesn't exists on your html.
Your javascript have a sintax error. (Missing closing brackets on your function.
You are using the property sytlecolor that doesn't exists (there's a typo on style, and even this way, stylecolor doesn't exists. Use style.backgroundColor instead.
Here's a working example:
<html>
<body id="background">
<button type="button" onclick="myFunction()"> Blue</button>
<script>
function myFunction(){
document.getElementByld("background").style.backgroundColor = "blue";
}
</script>
</body>
</html>
Also if you want to change the body background color, you don't need to put an id on it:
<html>
<body>
<button type="button" onclick="myFunction()"> Blue</button>
<script>
function myFunction(){
document.body.style.backgroundColor = "blue";
}
</script>
</body>
</html>
I'll go with
//On top goes the head
<button type="button">Blue</button>
And then I would create a JS file
var button=document.querySelector('button'),
body =document.querySelector('body');
button.addEventListener('click',function(){
body.style.backgroundColor="blue";
});
That should turn the background blue.
Add id of the specific element whose background you want to change
document.getElementsByTagName('body')[0].style.background='green'
<html>
<body>
<button type="button"
onclick="document.getElementsByTagName('body')[0].style.background='green'">
Click for green backgournd
</button>
<br />
<br /><br />
Another way to do from text box Just for your reference
<br />
<input style="width:100%" type="text" id="txtColorBox" placeholder="enter color name and click button"/>
<br/>
<button type="button"
onclick="document.getElementsByTagName('body')[0].style.background=document.getElementById('txtColorBox').value">
Click for green backgournd
</button>
</body>
</html>
Try this in your function
function myFunction(){
document.body.style.background = "blue";
}
There are two methods to this with vanilla javascript and the second is jQuery.
In your case, you are not using jQuery. So the solution is vanilla javascript.
function myFunction(element) {
element.style.backgroundColor="green";
}
<button type="button" onclick="myFunction()"> Blue</button> //Change web bg
if you need to change the button background. Pass the current pointer.
<button type="button" onclick="myFunction(this)"> Blue</button> //Change buttion bg
bg => background
Hi you could do something like so:
document.getElementById('buttonColor').addEventListener('click', () =>
document.body.style.backgroundColor = "blue"
);
<html>
<body>
<button id="buttonColor">Change Color</button>
</body>
</html>
How a javascript popup can be restricted to show on only first three visits for a page?
here is the html code
<div id="vr-apper" style='display:none'>
<div id="popup">
<center>
<!-- Content -->
<input class="procced_pop_btn" type="submit" name="submit" value="Proceed" onClick="PopUp('hide')" />
</center>
</div>
</div>
Here is javascript code to show popup
<script>
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('vr-apper').style.display = "none";
else document.getElementById('vr-apper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
</script>
I would recommend using cookies that increments by 1 using incremention method ++ of JavaScript, and if the cookies value is 4 or above it won't show the popup!
I'm trying to hide a part of every user email, registered in a website.
So lets say I have get zero#example.com and I want to hide everything after the "#". And only show it if someone clicks on whats left of the email.
Any help would be appreciated.
This just hides everything.
<p>
<button onclick=".hide('#email')">Hide</button>
<button onclick=".show('#email')">Show</button>
</p>
<div id="email">
<h2>zero#example.com<h2>
</div>
Try following:
<script type="text/javascript">
function show(){
document.getElementById('trail').style.display = 'inline';
}
function hide(){
document.getElementById('trail').style.display = 'none';
}
</script>
<p>
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
</p>
<div id="email">
<h2>zero<span id="trail">#something.com</span></h2>
</div>
You can use split ( => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split ) if you know what character to expect. In this case:
var full; // let's say, it already has a value (f.e. zero#something.com)
var visiblePart = full.split("#")[0];
and eventually you can do something like this on click:
function show(){
document.getElementById("emailH2").innerHTML = full;
}
function hide(){
document.getElementById("emailH2").innerHTML = visiblePart;
}
and
<h2 id = "emailH2">zero#something.com<h2>