I have java/Flask (any other technology I don't know exists yet :)) question.
Suppose I have two sites: index1.html and index2.html
index1.html:
<!DOCTYPE html>
<html>
<body>
<p>This example "trigger" action on another site "onclick".</p>
<p id="demo" onclick="myFunction()">Click me.</p>
<script>
function myFunction() {
//send info/request/get to localhost/index2.html for example get using XMLHttpRequest;
}
</script>
</body>
</html>
index2.html
<!DOCTYPE html>
<html>
<script>
window.onload= function (){ //Wait for some request from index1.html than do something for example change string in demo}
</script>
<body>
<p id="demo">To change</p>
</body>
</html>
It can be done partially with Flask but every time i trigger from index1.html index2.html I have to refresh manually index2.html.
Maybe there is another technology which help me to do that
You can use localStorage storage event or SharedWorker to communicate between browsing contexts.
index1.html
<!DOCTYPE html>
<html>
<body>
page2
<p>This example "trigger" action on another site "onclick".</p>
<p id="demo" onclick="myFunction()">Click me.</p>
<script>
localStorage.clear(); // clear `localStorage`
function myFunction() {
localStorage.setItem("page1", "value");
}
</script>
</body>
</html>
index2.html
<!DOCTYPE html>
<html>
<script>
window.onload = function() {
if (localStorage.getItem("page1") != null) {
document.getElementById("demo").textContent = localStorage.getItem("page1");
}
// do stuff at `storage` event
onstorage = e => {
if (e.key === "page1") {
document.getElementById("demo").textContent = e.newValue;
}
}
}
</script>
<body>
<p id="demo">To change</p>
</body>
</html>
plnkr http://plnkr.co/edit/4Xz58S5MDidORm4CAPco?p=preview
Related
So I need some help, I am new to JS and I need to to find a solution to the problem I am having. I am trying to create a button when it clicks changes a piece of text. When I create a JS function in the script tag header and reference the function in the button onclick it works, but it doesn't work in a separate JS file. The HTML code is below. Hopefully, someone can help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="changetext.js"></script>
<script>
function Button() {
document.getElementById("demo").innerHTML = "hello";
}
</script>
<script>
function Button2() {
document.getElementById("demo").innerHTML = "hi";
}
</script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
this is an example...
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
first you need remove your script.. we include script only if you dont use a external js.
on your external js(changetext.js)
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
result:
if you dont use a external js the code is this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>
we write the code js in the tag script good luck !!
Write your function in changetext.js and make sure that is in same place as your HTML file.
change onclick to onClick
and remove your script tags in the head
I am trying to add innerHtml of element named as P.I had added its attribute id which has value p1. And i had tried to changes it innerhtml while onclick of a button.But overall i am failed to do so. And i still have no idea why its not doing so.
<!DOCTYPE html>
<html>
<head>
<title>javascript </title>
</head>
<body>
<button onclick="myfunction()">click me</button>
<p id="new"> this my content added by manully</p>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("new").innerHtml="this is my first page";
function myfunction(){
//alert(1);
document.getElementById("p1").innerHtml="this is my first page";
//console.log();
}
</script>
</body>
</html>
I am following this example which is showing results successfully.Please have an eye on it.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
I was using wrong syntax of javascript function which is named as innerHTML but i was using it as innerHtml.
<!DOCTYPE html>
<html>
<head>
<title>javascript </title>
</head>
<body>
<button onclick="myfunction()">click me</button>
<p id="new"> this my content added by manully</p>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("new").innerHTML="this is my first page";
function myfunction(){
//alert(1);
document.getElementById("p1").innerHTML="this is my first page";
//console.log();
}
</script>
</body>
</html>
try this :
<script>
$(document).on('click', '#new', function () {
$(this).html('my msg');
})
</script>
Lets assume that I have an input box on a page. I click a button and whatever is in the input, is transferred to another page and retrieved using JavaScript.
Page1 = C:\Documents\page1.html
Page1 code:
<!DOCTYPE html>
<html>
<body>
<p>Name: <input type="text" id="user_input"</input></p>
<button onclick="start_page_2()">submit</button>
<script>
var start_page_2 = function(){
contents = document.getElemeentById("user_input").value;
//code to go to page 2;
}
</script>
</body>
</html>
Page2 = C:\Documents\page2.html
Page2 code:
<DOCTYPE html>
<html>
<body>
<h1 id="my_title">empty</h1>
<script>
//on load execute this {
//retrive contents from page1 and save as contents
//document.getElementById("my_title").innerHTML(contents);
//}
</script>
</body>
</html>
*Note that the input will contain spaces (if that's any help). All useful answers will be voted up.
You could just use localStorage
page1
<!DOCTYPE html>
<body>
<p>Name: <input type="text" id="user_input"</input></p>
<button onclick="start_page_2()">submit</button>
<script>
var start_page_2 = function(){
var contents = document.getElementById("user_input").value;
localStorage.setItem('user', contents);
window.location.href = 'page2.html';
}
</script>
</body>
</html>
page2
<DOCTYPE html>
<body>
<h1 id="my_title">empty</h1>
<script>
var full_name = localStorage.getItem('user');
document.getElementById("my_title").innerHTML = full_name;
</script>
</body>
</html>
This only works if you use an actual webserver to test your pages, and there's a polyfill for older browsers on MDN
i am a beginner to java script.i do the bellow code for changing the text color into red using java script.But it doesn't work.what is the error in my code?
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Remove innerHTML from var col=document.getElementById("demo").innerHTML;
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo");
col.style.color="#FF0000";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button below.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Dont use the innerHTML, it returns a String.
Use the style on the object itself.
Check out it working: JsFiddle
You can try this ...
document.getElementById('demo').style.color = '#FF0000';
Replace this code:
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
with this:
function display()
{
var col=document.getElementById("demo");
col.style.color="red";
}
Inner html would contain the html inside the demo tag, but you need to refer to the tag itself.
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
document.getElementById("demo").style.color="red";
}
</script>
</head>
<body>
<h1>Your Fixed JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Here's the fixed one I just made the change of the words turn red because it wasn't
html embedded with javascript
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
have I called this function correctly????
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
is there something wrong here???
function saysomething()
{
alert("I am 28 years old");
}
</script>
<body>
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Here is the full example.
This will work for sure.
Test it if you want.
Copy and paste the below code into W3Schools test environment, "Edit and Click me" to test.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
function saysomething()
{
alert("I am 29 years old");
}
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
</script>
<body onload="displayatts();">
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Your script runs before the document is parsed.
Therefore, getElementById returns null.
Move the <script> to the bottom.
"have I called this function correctly????"
You haven't called the displayatts() function at all. Add the following to the end of your script:
window.onload = displayatts;
That way displayatts() will be called automatically once the page finishes loading. It will, in turn, setup the click handler on your button.
Also, include the closing </head> tag just before the opening <body> tag.
Demo: http://jsfiddle.net/nnnnnn/rxDXa/
window.onload = displayatts;
Paste this code before </body> tag in your page.So you can be sure if element is null or not or the code is try to work before your html element is rendered.
Hope this helps your situation..
<script>
var element = document.getElementById("buttonone");
if(element){
element.setAttribute("onclick", "saysomething();");
}else
{
alert("element null, move the code to bottom or check element exists");
}
</script>