In the html part I don't want to include the events related code, events related code should be in inside the script tag
<!doctype html>
<head>
<style>
div{
width:200px;
background-color:grey;
}
</style>
<body>
<p>use the below area for events</p>
<div> point here </div>
<a id="event_output"></a>
<script>
var output=document.getElementById("event_output").innerHTML;
var div=document.getElementsByTagName("div");
div[0].onmouseover=function(){output="mouse over"}
div[0].onmouseout=function(){output="mouse out"}
</script>
</body>
You are just updating the output variable which is a string. Instead store the object reference and set its innerHTML property.
<style>
div {
width: 200px;
background-color: grey;
}
</style>
<p>use the below area for events</p>
<div>point here</div>
<a id="event_output"></a>
<script>
var output = document.getElementById("event_output");
var div = document.getElementsByTagName("div");
div[0].onmouseover = function() {
output.innerHTML = "mouse over"
}
div[0].onmouseout = function() {
output.innerHTML = "mouse out"
}
</script>
Related
So I have a template from Geeks for Geeks where the entire page is replaced with the click of a button (Link: https://www.geeksforgeeks.org/how-to-replace-the-entire-html-node-using-javascript/). I want to have a second button that changes the page to some different text. I have tried duplicating the JS and HTML to a different page, but it disables the buttons. Thanks!
<!DOCTYPE HTML>
<html>
<head>
<title>
Replace the entire HTML node using JavaScript.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
#div {
background: green;
height: 100px;
width: 200px;
margin: 0 auto;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<button onclick="GFG_Fun();">
click here
</button>
<p id="GFG_DOWN" style="color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button to replace the entire HTML element.";
function GFG_Fun() {
var Str =
'<!DOCTYPE HTML><html><head><title>Check if an element is a div'+
' in JavaScript.</title></head><body style = "text-align:center;">'+
'<h2 style = "color:green;">GeeksForGeeks</h2><p>'+
'This is replaced element.</p></body> </html>';
var newHTML = document.open("text/html", "replace");
newHTML.write(Str);
newHTML.close();
}
</script>
</body>
</html>
This is an answer to my previous question.
What you can do if you encounter this problem is to duplicate the function GFG_Fun() (naming it something else, of course) and then making a second button with the duplicated function. Here's a code snippet as an example:
<!DOCTYPE HTML>
<html>
<head>
<title>
Replace the entire HTML node using JavaScript.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
#div {
background: green;
height: 100px;
width: 200px;
margin: 0 auto;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<button onclick="GFG_Fun();">
click here
</button>
<button onclick="GFG_Fun2();">
click here too
</button>
<p id="GFG_DOWN" style="color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button to replace the entire HTML element.";
function GFG_Fun() {
var Str =
'<!DOCTYPE HTML><html><head><title>Check if an element is a div'+
' in JavaScript.</title></head><body style = "text-align:center;">'+
'<h2 style = "color:green;">GeeksForGeeks</h2><p>'+
'This is replaced element.</p></body> </html>';
var newHTML = document.open("text/html", "replace");
newHTML.write(Str);
newHTML.close();
}
function GFG_Fun2() {
var Str =
'<!DOCTYPE HTML><html><head><title>Check if an element is a div'+
' in JavaScript.</title></head><body style = "text-align:center;">'+
'<h2 style = "color:green;">HI!</h2><p>'+
'This is replaced element.</p></body> </html>';
var newHTML = document.open("text/html", "replace");
newHTML.write(Str);
newHTML.close();
}
</script>
</body>
</html>
Using JavaScript (or jQuery), create a variable called “myName” and set the value to your “myName”
Create a , that when you click it, it displays an alert with your “myName” variable.
Here is the problem I am currently working. I am super new to this and just trying to figure this out. Here is the code I currently have, when I click the button it displays nothing.
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick=var "myName"Woolley>Button</button>
</body>
</html>
java script
var "myName"
"Woolley"
you can check below code to change the value
<p id="changeName">Mark</p>
<button type="button" class="myevent">Button</button>
<script>
jQuery(function(){
$('.myevent').on('click', function(){
var name = "John Doe";
$('#changeName').val(name);
});
});
</script>
This is Jquery function please inlcude jquery library before use this.
Using pure Javascript:
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<script>
function displayName(){
var myName = "Woolley";
alert(myName);
}
</script>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="displayName()">Button</button>
</body>
</html>
To make the onclick on your button do something, tell the onclick what to do when triggered; In this case, I told it do execute the function myFunction.
In this function, create your variable and alert it using alert()
function myFunction() {
var myName = "Woolley";
alert(myName);
}
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="myFunction()">Button</button>
</body>
</html>
If you don't want to use a function, you can also tell onclick to execute alert() without a function:
<button type="button" onclick="var myName = 'Woolley'; alert(myName);">Button</button>
Please note that you need to use " and ' properly, otherwise your HTML is invalid and can't execute your JavaScript.
I am making a very simple page that just counts how many seconds the user has had the tab open. In the console the seconds update, but on the page in the browser, it ain't.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Counter</title>
<script type="text/javascript">
window.seconds = document.getElementById('counts');
var count = setInterval('counter()', 1000);
function counter(){
console.log(seconds)
document.getElementById('counts').innerHTML = window.seconds + 1;
}
</script>
<style>
h2 {
text-align:center;
color:#032441;
font-family:monospace;
}
div {
text-align:center;
color:#032441;
font-size:70px;
font-family:monospace;
}
</style>
</head>
<body>
<script>
document.body.style.backgroundColor = "#EBE9BD"
</script>
<h2>
You have been on this page for
</h2>
<div id="counts">
0
</div>
<h2>
seconds.
</h2>
</body>
</html>
What is the problem?
The variable seconds is declared too soon before the element is even rendered, that's why I added the window.onload wrapper to your code.
You need to use innerHTML to change the content of a div element.
Not related, but you can also style the body tag via CSS rule.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Counter</title>
<script type="text/javascript">
window.onload = function () {
var seconds = document.getElementById('counts');
var count = setInterval(counter, 1000);
function counter(){
var newCount = Number(seconds.innerHTML) + 1
console.log(newCount);
seconds.innerHTML = newCount;
}
}
</script>
<style>
body {
backgroundColor: "#EBE9BD";
}
h2 {
text-align: center;
color: #032441;
font-family: monospace;
}
div {
text-align: center;
color: #032441;
font-size: 70px;
font-family: monospace;
}
</style>
</head>
<body>
<h2>
You have been on this page for
</h2>
<div id="counts">
0
</div>
<h2>
seconds.
</h2>
</body>
</html>
You could use the following:
<script type="text/javascript">
window.seconds = document.getElementById('counts');
setInterval('counter()', 1000);
function counter(){
console.log(seconds.innerHTML);
window.seconds.innerHTML++;
}
</script>
Bare in mind that 'counts' is not yet defined as soon as the script runs.
To access the "body" of an Element you have to access it via element.innerHTML which in your case would look like window.seconds.innerHTML = window.seconds.innerHTML + 1
EDIT: But that won't fix your problem.
Your script does not detect the <div id="counts"> element, since it has not been loaded yet, you can fix this by moving the script after the div
Since innerHTML returns a string, performing + will attach both strings and your seconds will look like 011111111 So you'll have to parse it to a string via parseInt(window.seconds.innerHTML)
So changing
window.seconds = window.seconds + 1
to
window.seconds.innerHTML = parseInt(window.seconds.innerHTML) + 1;
and moving the script tag at the very bottom, should to the trick
I am trying to make another div right under the existing div in the HTML
<html>
<head>
<title>
Media Player
</title>
<script src="script.js"></script>
</head>
<script>
makeOscarPlayer(document.getElementById("my-video"))
</script>
<body>
<div class="my-player">
Hello!
</div>
</body>
</html>
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `
hello
`
}
can someone explain to me what I am doing wrong? I am a self-taught developer sorry if my code is not perfectly organized still learning
You are calling the makeOscarPlayer() function before you are creating it.
You need to wrap the makeOscarPlayer() function declaration in a script tag.
You are passing in document.getElementById("my-video") as a parameter to makeOscarPlayer(), but there is no HTML element with an id of 'my-video'. You are giving the function a parameter of null, while the function declaration has no parameters.
You need to tell the script where to put the new element. To do that, you grab an existing element and use parentNode and insertBefore
Here is a barebones version that I got working for your reference:
<html>
<head>
<title>
Media Player
</title>
</head>
<script>
</script>
<body>
<div id="my-player">
Hello!
</div>
</body>
</html>
<script type="text/javascript">
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `hello`;
// This grabs the element that you want to create a new element by
var existingDiv = document.getElementById("my-player");
// This tells the script where to put the new element
existingDiv.parentNode.insertBefore( div, existingDiv.nextSibling);
}
// Must be called in the same script block or after the script holding the function declaration is loaded
makeOscarPlayer();
</script>
For more information on how parentNode and insertBefore work, see this Stack Overflow question
You need to append that new element to a specific parent, in your case to my-video.
The function appendChild appends the new element to a parent element.
function makeOscarPlayer(parent) {
var div = document.createElement("div");
div.innerHTML = 'Hello from Ele';
parent.appendChild(div);
}
makeOscarPlayer(document.getElementById("my-video"))
#my-player {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 300px;
background-color: #f1f1f1
}
#my-video div {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 200px;
font-weight: 700;
}
<div id="my-player">
Hello!
<div id="my-video">
</div>
</div>
It's a good start, but you're calling the function incorrectly and your function isn't adding anything to the page.
we use appendChild to add a node to the page.
In your function you create and add text to a div, but you don't return the node you made(and also you didn't close your line of code with a semi-colon so I added that too) but this should work:
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<div class="my-player">
Hello!
</div>
<script>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
</script>
</body>
</html>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<!-- added my-video div -->
<div id="my-video"></div>
<div class="my-player">
Hello!
</div>
</body>
</html>
Hi I'm using this: http://galleria.io/ to create a popup image slider.
Basically I want it to appear fixed over my page only after the user clicks a link to open it (it will not open another page). If I use "display: none" it will load in the background slowing everything down as it will contain HD images.
Right now I am trying this:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<style>
.galleria {
width: 700px;
height: 400px;
background: #000
}
</style>
<script>
</script>
</head>
<body>
Click me to load images
<script>
function showGallery() {
var content = "<div class=\'galleria\'><img data-src=\'photo1.jpg\'><img data-src=\'photo2.jpg\'><img data-src=\'photo3.jpg\'></div>";
var hello = "hello world";
console.log("hi it's working");
$('body').append(hello);
}
$('#imageshow').click(function() {
showGallery();
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
});
</script>
</body>
</html>
This the documentation for Galleria:
http://galleria.io/docs/getting_started/beginners_guide/
I had a real good look at this and even downloaded the galleria.js for it. Coming to the simple conclusion that your code is likely to only miss a document ready statement :
<script>
$(document).ready(function() {
function showGallery() {
var content = "<div class=\'galleria\'><img data-src=\'photo1.jpg\'><img data-src=\'photo2.jpg\'><img data-src=\'photo3.jpg\'></div>";
var hello = "hello world";
console.log("hi it's working");
$('body').append(hello);
}
$('#imageshow').click(function() {
showGallery();
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
});
});
</script>