Hello I have one confusion in my head.
I'm trying to make a logic in JS when some one click on BUTTON then automatically lead to next page after 1s.
I tried to use onclick function but I'm getting error.
I included simple html and css in purpose of texting.
Can some one help me.
Also That logic must apply to any pages.
Cheers!
#btn {
position: relative;
width: 300px;
height: 80px;
content: 'Button';
background: blue;
border-radius: 9px;
color: white;
vertical-align: center;
}
#next {
position: relative;
width: 300px;
height: 80px;
content: 'Button';
background: blue;
border-radius: 9px;
color: white;
margin-top:50px;
}
#text {
margin:auto;
position: relative;
width: 80px;
height: 40px;
padding-top: 30px;
}
<<!DOCTYPE html>
<html>
<head>
<title>!!!AAA!!!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="btn"><div id="text">Button</div></div>
<div id="next"><div id="text">next</div></div>
</body>
</html>
To go to a different page after 1 second you'll want to use a combination of setTimeout() and window.location and an onclick event on your button.
I am assuming you want to use the button next to make this happen.
First thing create a second html test page.
<html>
<body>
<h1>Page 2</h1>
</body>
</html>
and in the code you shared, after the closing </div> tag for id next add the following:
<!DOCTYPE html>
<html>
<head>
<title>!!!AAA!!!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="btn">
<div id="text">Button</div>
</div>
<div id="nextPage">
<button id="next" onclick="switchLocation(0)">next</button>
</div>
<script>
function switchLocation(counter) {
if (counter == 0) {
counter = 1;
setTimeout(function() {
switchLocation(counter);
}, 1000);
} else {
window.location = "page2.html";
}
}
</script>
</body>
</html>
I edited your code slightly. Removed the extra < on the first line and changed the "next" div to a button.
Related
Neither in the IDE when I preview does the button click nor in the various browsers I used. (Mozilla, Chrome)
I want the button to click but I can not do it although the IDE does not get an error. Take the following piece of code:
function increment() {
console.log("The button was clicked")
}
increment()
html,
body {
margin: 0;
padding: 0;
}
button {
border: none;
padding-top: 10px;
padding-bottom: 10px;
color: white;
font-weight: bold;
width: 200px;
margin-bottom: 5px;
border-radius: 5px;
}
#increment-btn {
background: darkred
}
<!DOCTYPE html>
<html lang="el">
<head>
<title>Page Count</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>People enter:</h1>
<h2 id="count">100</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>
in your Javascript file don't call the function again. as you are already calling it on button,
i mean on button you have added " onclick " handler it should work just fine. just remove last line in Javascript file
JS just refuses to do anything - doesn't show console.log, doesn't show any errors, doesn't do anything.
JS just doesn't give any signs of life really - I tried making document.getelementbyid(box1) and ("#box") and ("box") because of people on the internet use all these and it works.
Tried to make events embedded in HTML to call the function, tried to call the function on window.onload, etc.
Tried changing text and color and size and margins - nothing works. And there is sometimes a null error - meaning that JS can't get the style value for some reason.
var box = document.getElementById("#box1");
function changeColor() {
var box = document.getElementById("#box1");
box.style.backgroundColor = 'red';
}
#box1 {
height: 100px;
width: 100px;
background-color: #B9E257;
}
#box2 {
height: 100px;
width: 100px;
background-color: #69ADE1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="N.css" type="text/css">
</head>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<button onclick="changeColor()">Go!</button>
<script src="N.js" type="text/javascript"></script>
</body>
</html>
Why on earth would it not work?
The Document method getElementById() returns an Element object
representing the element whose id property matches the specified
string. Since element IDs are required to be unique if specified,
they're a useful way to get access to a specific element quickly.
For more info visit the docs
The ID is case-sensitive string which is unique within the document;
Please check the running example below:
function changeColor() {
var box = document.getElementById("box1");
console.log(box);
box.style.backgroundColor = 'red';
}
#box1 {
height: 100px;
width: 100px;
background-color: #B9E257;
}
#box2 {
height: 100px;
width: 100px;
background-color: #69ADE1;
}
<head>
<link rel="stylesheet" href="N.css" type="text/css">
</head>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<button onclick="changeColor()">Go!</button>
<script src="N.js" type="text/javascript"></script>
</body>
Your JS throwing error just because you are using # in document.getElementById which is not allowed. You need to define # for ID in jQuery not in JS.
Here is the updated code. Just only removed # from document.getElementById nothing else I have done in it.
function changeColor() {
var box = document.getElementById("#box1");
box.style.backgroundColor = 'red';
}
#box1 {
height: 100px;
width: 100px;
background-color: #B9E257;
}
#box2 {
height: 100px;
width: 100px;
background-color: #69ADE1;
}
<head>
<link rel="stylesheet" href="N.css" type="text/css">
</head>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<button onclick="changeColor()">Go!</button>
<script src="N.js" type="text/javascript"></script>
</body>
If you really like that #, then instead of
var box = document.getElementById("#box1");
do
var box = document.querySelector("#box1");
So, I am trying to make a Gamebook that takes the players input in a form and then, when clicked, shows the text. Depending on what the player has answered, the game will reply, and so on. It has the idea of this game: https://jsfiddle.net/MacroG0D/9g1130pm/
So, below you can see that I do understand how to add text, using click and append. I just can't figure out how MacroG0D (in the fiddle) applied it to his game. Because I can't get it to work.
I also want to have the players-name shown as well and have this interaction. Since I can't seem to get it to work, it feels like it would be stupid to write the whole game first since I can't test it if this doesn't work.
Can someone maybe explain how it was done in the jsfiddle or have some tips?
$(document).ready(function() {
$("#button").click(function() {
var toAdd = $("input[name=checkListItem]").val();
$(".list").append('<div class="item">' + toAdd + '</div>');
});
});
h2 {
font-family: arial;
}
form {
display: inline-block;
}
#button {
display: inline-block;
height: 20px;
width: 70px;
background-color: #cc0000;
font-family: arial;
font-weight: bold;
color: #ffffff;
border-radius: 5px;
text-align: center;
margin-top: 2px;
}
.list {
font-family: garamond;
color: #cc0000;
}
<!DOCTYPE html>
<html>
<head>
<title>Gamebook</title>
<link rel="stylesheet" type="text/css" href="CODEC.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="CODEC.js"></script>
</head>
<body>
<h2>The Dutch Golden Age</h2>
<p>Contains an introduction story </p>
<p>Are you ready to play the game?</p>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div id="button">Answer</div>
<br/>
<div class="list"></div>
</body>
</html>
Hi i am making a Robot control system, i want to control it through a website i have made. However, i cant find a way to link this up to python code to control the Raspberry pi GPIO.
The active version of my website is at www.awesomecoding.co.uk and here is the source code of the html:
<html>
<head>
<style type="text/css">
#commands{
text-align: center;
color: FF8300;
font-size: 100px;
}
.controllbox{
width: 610px;
margin: 0 auto;
}
#arrowUp{
text-align: center;
position: static;
}
#arrowRight{
text-align: right;
position: static;
margin-top: 0;
}
#arrowDown{
text-align: center;
position: static;
}
#arrowLeft{
text-align: left;
position: static;
margin-top: -200px;
}
#stop{
width: 120px;
height: auto;
margin: 0 auto;
margin-top: -65%;
margin-left: 34%;
text-align: center;
position: static;
}
</style>
</head>
<body>
<h1 id="commands">Controll Me!!</h1>
<div class="controllBox">
<div id="arrowUp"><img src="arrowUp.jpg" class="controll" id="button1"></div>
<div id="arrowRight"><img src="arrowRight.jpg" class="controll" id="button2"></div>
<div id="arrowLeft"><img src="arrowLeft.jpg" class="controll" id="button3"></div>
<div id="arrowDown"><img src="arrowDown.jpg" class="controll" id="button4"></div>
<div id="stop"><img src="stop.jpg" class="controll" id="button5"></div>
</div>
<script type="text/javascript">
document.getElementById('button1').onclick = function(){
document.getElementById('commands').innerHTML = 'Foward'
}
document.getElementById('button2').onclick = function(){
document.getElementById('commands').innerHTML = 'Right'
}
document.getElementById('button3').onclick = function(){
document.getElementById('commands').innerHTML = 'Left'
}
document.getElementById('button4').onclick = function(){
document.getElementById('commands').innerHTML = 'Backwards'
}
document.getElementById('button5').onclick = function(){
document.getElementById('commands').innerHTML = 'Stop'
}
</script>
</body>
I am looking to see if anyone knows of an easy yet lag free way to do this.
I thank you for and advice you can add towards this project i am doing.
the best and easy way is to use python flask framework at the back-end
Flask Doc,
Flask Tutorial
Pyscript is a new development project that will allow you to implement Python code directly into your HTML document.
First add the following into your <head> section like this:
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
Then just input these tags inside of your <head> or <body> tags.
<py-script>
Your code here
</py-script>
Hope this helps!
Okay, so this bug has cost me quite a bit of time and embarrassment. It seems that any style variable with a - in it's name can't be modified by javascript.
As seen here:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Class Test</title>
<meta charset="utf-8" />
<style>
body { text-align: center; background-color: #ffffff;}
#box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000; color: #000000;}
</style>
<script type="text/javascript">
var box = 0;
</script>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
box = document.getElementById('box');
box.style.background-color = "#0000ff";
</script>
</body>
</html>
The box in said example will just remain red.
So how do I change a style variable with a - in it's name?
backgroundColor, camelCase.
background-color literally means "the value in background, minus the value in color"
You want backgroundColor
More info...