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>
Related
i've a array of three links for a button which i'm using in footer and when i press the button again and again , array will work one by one good ..and every time it shows a link when press the button. That is good.
but i want , when i click on button that "link" should open in "iframe" ... i used iframe code to pass them src= button id but not working.. please below code and help..
.
my button code with array
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<script>
let link = new Array()
link[0] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL3+8QE&distance=20"
link[1] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL5+3NG&distance=20"
link[2] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL4+3NS&distance=20"
let intlinkIndex = 0;
function writeLink() {
if (intlinkIndex >= link.length) {
let btn = document.getElementById('btn');
btn.style.display = 'none';
mylink.style.display = 'none';
}
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
intlinkIndex++;
}
</script>
</head>
<body>
<div class="footer">
<button id="btn" onclick="writeLink();">Click Me</button>
<div id="mylink"></div>
<br>
<iframe id="iframe" src="mylink" width="100%" height="400"></iframe>
</div>
</body>
</html>
You can get it by specifying iframe's name in target when generating link html.
So add a name property in your iframe like following:
<iframe id="iframe" name="iframe" src="mylink" width="100%" height="400"></iframe>
Then add a target property.
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
function writeLink() {
if (intlinkIndex >= link.length) {
let btn = document.getElementById('btn');
btn.style.display = 'none';
mylink.style.display = 'none';
}
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
document.getElementById('iframe').src = link[intlinkIndex];
intlinkIndex++;
}
Full source code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<script>
let link = new Array()
link[0] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL3+8QE&distance=20"
link[1] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL5+3NG&distance=20"
link[2] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL4+3NS&distance=20"
let intlinkIndex = 0;
function writeLink() {
if (intlinkIndex >= link.length) {
let btn = document.getElementById('btn');
btn.style.display = 'none';
mylink.style.display = 'none';
}
document.getElementById('mylink').innerHTML = '' + link[intlinkIndex] + '';
document.getElementById('iframe').src = link[intlinkIndex];
intlinkIndex++;
}
</script>
</head>
<body>
<div class="footer">
<button id="btn" onclick="writeLink();">Click Me</button>
<div id="mylink"></div>
<br>
<iframe id="iframe" src="mylink" width="100%" height="400"></iframe>
</div>
</body>
</html>
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>
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>
Is there any change to have input element similar like is on my screenshot.
I would like to change value via javascript and highlight part of text with different color if it will be wrapped with *
Thanks for any help.
You cannot do it with an input element. Here is one alternative:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/*style it to look like input element*/
[contenteditable] {
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="contentDiv" contenteditable>sdfsdtokendfdfsdfs</div>
<br/>
<input type="button" onclick="test()" value="Click me"/>
<script type="text/javascript">
function test() {
// this is our token
var valueToSelect = "tokendfdf";
var contentDiv = document.getElementById('contentDiv');
// check if div contains wanted token
if (contentDiv.innerHTML.indexOf(valueToSelect) >= 0) {
// create span with wanted color
var replaceString = '<span style="color: red">*' + valueToSelect + '*</span>';
// replace the string with colored span
contentDiv.innerHTML = contentDiv.innerHTML.replace(valueToSelect, replaceString);
}
}
</script>
</body>
</html>
Here is JS Bin example