I am trying to have multiple scripts run in my html sheet, and it seems to not be working. All the other scripts work except for the script for the blinking function. I don't see what the problem is. Can you find the issue with my code? Thanks in advance!
Here is my code below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
});
</script>
<script>
//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
</div>
<div class="text2">
-- : --
</div>
<button class="btn1">online</button>
</body>
</html>
The second script must be inside a JQuery function.
$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
});
The second script's contents should be in the document ready handler otherwise the code attempts to locate and work with the .text2 element before that element has been parsed into memory.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
} else {
element.show();
}
shown = !shown;
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<div class="text2">-- : --</div>
<button class="btn1">online</button>
</body>
</html>
Related
When I open the site I want the iframe to immediately run code that I have already put in (<p>hello</p>).
But the code doesn't get executed, I have to put a space or do something before it runs.
If you can't get that to work, a run button will also work.
function compile() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function() {
code.open();
code.writeln(
html.value
);
code.close();
};
}
compile();
#html {
width: 95em;
}
textarea {
width: 32%;
float: top;
min-height: 250px;
overflow: scroll;
margin: auto;
display: inline-block;
background: #f4f4f9;
outline: none;
font-family: Courier, sans-serif;
font-size: 14px;
}
iframe {
bottom: 0;
position: relative;
width: 100%;
height: 35em;
}
<html>
<head>
<title>Code Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<textarea id="html"><p>hello</p></textarea>
<iframe id="code"></iframe>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
The code that writes to the iframe is within an onkeyup event. Nothing will be written until a key is pressed and released. To solve your problem, simply write to the iframe outside of the onkeyup event when the compile function is called as in the example below.
function compile() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
code.open();
code.writeln(html.value);
code.close();
document.body.onkeyup = function() {
code.open();
code.writeln(html.value);
code.close();
};
}
compile();
You have to change your function to make it say .onload instead of .onkeyup like this:
function compile() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
document.body.onload = function() {
code.open();
code.writeln(
html.value
);
code.close();
};
}
compile();
You could also add a second function with a different name that does the same thing as the original function so that it still changes when you change the code:
function change() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function() {
code.open();
code.writeln(
html.value
);
code.close();
};
}
change();
Im trying to change my nav when a user scrolls 50px down on the page. In my consol log i can see that it detects the scroll, but it only shows 0, and not the new new amount.. What am i doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title>Scroll Test</title>
<script type="text/javascript">
window.onload = oppstart;
function oppstart() {
document.getElementById("doc").onscroll = scroll;
}
function scroll() {
var element = document.getElementById("doc");
var y = element.scrollTop;
console.log(y);
document.getElementById("utskrift").innerHTML = y + " px";
if (y === 50) {
document.getElementById("navigation").style.backgroundColor = "red";
}
}
</script>
<style type="text/css">
body {
overflow: auto;
}
#navigation {
height: 30vh;
background-color: black;
overflow: auto;
}
#main {
height: 200vh;
}
</style>
</head>
<body id="doc">
<nav id="navigation"></nav>
<div id="main">
<p id="utskrift"></p>
</div>
</body>
</html>
just change
element.scrollTop;
to
window.scrollY
<!DOCTYPE html>
<html>
<head>
<title>Scroll Test</title>
<script type="text/javascript">
window.onload = oppstart;
function oppstart() {
document.getElementById("doc").onscroll = scroll;
}
function scroll() {
var y = window.scrollY;
console.log(y);
document.getElementById("utskrift").innerHTML = y + " px";
if (y === 50) {
document.getElementById("navigation").style.backgroundColor = "red";
}
}
</script>
<style type="text/css">
body {
overflow: auto;
}
#navigation {
height: 30vh;
background-color: black;
overflow: auto;
}
#main {
height: 200vh;
}
</style>
</head>
<body id="doc">
<nav id="navigation"></nav>
<div id="main">
<p id="utskrift"></p>
</div>
</body>
</html>
/*jshint strict:false */
document.getElementById("btn_1").addEventListener("click", function() {
test(this);
});
document.getElementById("btn_2").addEventListener("click", function() {
test(this);
});
document.getElementById("btn_3").addEventListener("click", function() {
test(this);
});
function test(id) {
var e = document.getElementById(id);
var d = document.createElement('p');
d.innerHTML = e.innerHTML;
e.parentNode.insertBefore(d, e);
e.parentNode.removeChild(e);
}
/* CSS Document */
body {
background-color: #484848;
}
p {
margin: 2em 2em;
color: aliceblue;
}
button {
margin: 1em 2em;
color: ghostwhite;
background: #677762;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Line Game</title>
</head>
<p>Als die ersten Menschen auftauchten lehrten wir sie:</p>
<button id="btn_1">Jagen</button>
<button id="btn_2">Fischen</button>
<button id="btn_3">Landwirtschaft</button>
<!--Javascript Time-->
<script src="Javascript.js"></script>
<body>
</body>
</html>
So here is all my code. And i want to replace the Buttons to Paragraph after someone clicked them. The old Text from the Buttons should still be there.
Yea sorry for the Dump Question, tried a few hours and get a little tired of trial and error.
Change test(this); to test(this.id);
/*jshint strict:false */
document.getElementById("btn_1").addEventListener("click", function() {
test(this.id);
});
document.getElementById("btn_2").addEventListener("click", function() {
test(this.id);
});
document.getElementById("btn_3").addEventListener("click", function() {
test(this.id);
});
function test(id) {
var e = document.getElementById(id);
var d = document.createElement('p');
d.innerHTML = e.innerHTML;
e.parentNode.insertBefore(d, e);
e.parentNode.removeChild(e);
}
/* CSS Document */
body {
background-color: #484848;
}
p {
margin: 2em 2em;
color: aliceblue;
}
button {
margin: 1em 2em;
color: ghostwhite;
background: #677762;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Line Game</title>
</head>
<p>Als die ersten Menschen auftauchten lehrten wir sie:</p>
<button id="btn_1">Jagen</button>
<button id="btn_2">Fischen</button>
<button id="btn_3">Landwirtschaft</button>
<!--Javascript Time-->
<script src="Javascript.js"></script>
<body>
</body>
</html>
In this code you throw link to element
test(this);
but you need to throw attribute id
test(this.id);
I am new to HTML/CSS/JavaScript/Jquery/
I have an array of div tags which are represented as boxes. I would like to change the colour of the boxes when I hover over them but I am not sure how to access each div tag and change its properties.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script3.js"></script>
<body>
<div class="wrapper">
</div>
</body>
</head>
</html>
CSS:
body
{
background:#000;
}
.square
{
display: table-cell;
vertical-align: middle;
text-align: center;
border:2px solid #73AD21;
height: 2.5rem;
width: 2.5rem;
background-color: white;
}
Javascript/Jquery:
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
/*$('.wrapper').hover(function()) {
$(this).css("background","#F00");
}*/
});
When I add the commented lines in Javascript/Jquery section, the whole webpage becomes black.
When I add the commented lines in JavaScript/jQuery section, the whole webpage becomes black.
That's because there is a syntax error. When this occurs, none of the .square elements are being appended, which is exactly why you are seeing a blank page.
The .hover() method expects two functions as parameters (a hover-in, and hover-out callback). Therefore it seems like you want the following:
Example Here
$('.wrapper .square').hover(function() {
$(this).css("background", "#f00");
}, function() {
$(this).css("background", "#fff")
});
However, you can do this with pure CSS using the :hover pseudo-class. You don't actually need jQuery for this.
Example Here
.square:hover {
background-color: #f00;
}
There is some syntactical error in your code on commented lines.
This is correct one
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
$('.square').hover(function() {
$(this).css("background","#F00");
},function(){
$(this).css("background","#fff");
});
});
WORKING FIDDLE
Hope you want this...
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
$('.wrapper').on('hover','.square',function() {
$(this).css("background","#F00");
});
$('.wrapper').on('mouseleave','.square',function() {
$(this).css("background","#FFF");
});
});
body
{
background:#000;
}
.square
{
display: table-cell;
vertical-align: middle;
text-align: center;
border:2px solid #73AD21;
height: 2.5rem;
width: 2.5rem;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script3.js"></script>
<body>
<div class="wrapper">
</div>
</body>
</head>
</html>
That is because you have a syntax error on this line
$('.wrapper').hover(function()) {
$(this).css("background","#F00");
}
You are closing the hover function before you call the $(this).css function so the "this" that is being selected is the body. It should be:
$('.square').hover(function() {
$(this).css("background","#F00");
}, function() {
$(this).css("background","#FFF");
});
In the below code,
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.background-color = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.background-color="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike">Like</button>
</body>
</html>
error is thrown at line document.body.lastElementChild.style.background-color = "#FF9966";. Error is Invalid left-hand side in assignment.
How do I resolve this error?
Note: yet to learn JQuery
First of all you need to use element.style.backgroundColor instead of element.style.background-color.
Here is a list of the JS equivalent of CSS attributes.
Your second problem is that your script executed before the <button> is loaded, thus making the script the current lastElementChildof body.
You can solve this by wrapping your script in window.onload:
(Also, selecting your button with document.body.lastElementChild is bound to give you errors since you most likely at some point will add something after the button)
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button {
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color: white;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var likeButton = document.getElementById("like-button");
likeButton.onclick = changeColor;
function changeColor() {
if (likeButton.innerHTML == "Like") {
likeButton.style.backgroundColor = "#FF9966";
likeButton.innerHTML = "Unlike";
} else {
likeButton.style.backgroundColor = "#00FFFF";
likeButton.innerHTML = "Like";
}
}
}
</script>
<button type="button" name="LikeUnlike" id="like-button">Like</button>
</body>
</html>
background-color is not a valid JavaScript identifier. For setting it with DOM style object, it should be backgroundColor in camel case.
More info on DOM style object at http://www.w3schools.com/jsref/dom_obj_style.asp
Check out my demo
JS
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
I think you should use document.body.lastElementChild.style["background-color"] to set color for element
not background-color but backgroundColor . Try this and see if works
document.body.lastElementChild.style.backgroundColor = "#FF9966";
the total code:
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
You use this code. It is working fine.
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor =
"#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike" onclick="changeColor
()">Like</button>
</body>
</html>
You can use Jquery for assign or remove a css class, to add color to your button, with this code:
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
the toggleClass function is to add and remove a css class,
"othercolor" is your class css with the styles to your button.
Include jquery with this script before </body> and before the code above:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
I hope it helps you.