How to fire up a code when changes happens on another document? - javascript

As in the question I'm trying to fire up a code when a event happens, in my case I got the following index.html code:
<html>
<body>
<script>
window.addEventListener('storage', function(event) {
console.log("changed key: " + event.key);
console.log("old value : " + event.newValue);
});
</script>
</body>
</html>
And here I'm trying to put a item in the localStorage to trigger the javascript code from index.html:
<html>
<body>
<script>
window.localStorage.setItem("sss", "test");
console.log(window.localStorage.getItem("sss"));
</script>
</body>
</html>
Couldn't get the output working unfortunately, any ideas?

Related

How to get the value inside the input of type text in JavaScript?

var data = document.getElementById('myFieldId');
console.log(data.value);
<!DOCTYPE html>
<html>
<head> </head>
<body>
<input type="text" id="myFieldId"/>
<script src="main.js"></script>
</body>
</html>
I expect when I write any text in the input, it would print the corresponding text. But I don't get anything in the console. What should I do?
You need to add an event listener that executes as soon as someone inputs text.
There is no such thing as binding a variable to a text input; this needs to be implemented by yourself.
See this example:
const data = document.getElementById('myFieldId');
data.addEventListener(
'input', // first argument is the name of the event you want to react to
// second argument is the function that should execute when the event occurs
function(inputEvent) {
console.log(data.value);
}
);
<input type="text" id="myFieldId"/>
You code start at load page so is empty, i add an onchange event so when you finish to write console.log will output the value.
var data = document.getElementById('myFieldId');
data.onchange = function()
{
console.log(this.value);
};
<!DOCTYPE html>
<html>
<head> </head>
<body>
<input type="text" id="myFieldId"/>
<script src="main.js"></script>
</body>
</html>

innerHTML Cannot Be Set [duplicate]

This question already has an answer here:
Javascript getElementById null error
(1 answer)
Closed 5 years ago.
Why is the text in the div not changed? What did I do wrong here?
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div id="demo">Text to be changed.</div>
</body>
</html>
And the Javascript:
document.getElementById("demo").innerHTML = "Hello World";
Thank you in advance.
You need to put the tag at the bottom. Or after the div. When the script is loaded as you have it now, the DOM is not yet ready. So if you run the script after the DOM has been initialized, you'll be fine. So put
<script src="script.js"></script>
Just before </body>
Your script is runing before your document is finished loading, so you may need to wait for onload. With jQuery you'd do this:
$(function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Or more succinctly:
$(function() {
$("#demo").html("Hello World");
});
You need to wrap your JavaScript with a listener for the DOM being ready:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("demo").innerHTML = "Hello World";
});
It's firing too early at the moment.
https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded
this is working
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
document.getElementById('demo').innerHTML = 'Hello World';
});
</script>
</head>
<body>
<div id="demo">Text to be changed.</div>
</body>
</html>

Undefined when doing document.write() with button OnClick="counter"

I'm new to programming and would need some help, why the document.write() didn't work and basically the page crashes... Can anyone help me?
<!DOCTYPE html>
<html>
<head>
</head>
<script type="text/javascript">
function showText() {
var x;
var counter;
if ( x === 0) {
counter = 0;
x = 1;
}
counter = counter + 1;
document.write("Times clicked: " + counter);
}
</script>
<body>
<script type="text/javascript">
showText();
</script>
<button onclick="showText();">Click Me!<button>
</body>
</html>
Avoid using document.write
Quoting from the MDN Developer Network documentation page:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.
So basically, your issue is using document.write after the page has loaded: this will result in deleting the entire content of the page and displaying that string.
Also, your code doesn't work because your count variable is declared inside the showText function, and you're trying to access it outside of it, running into an error.
Solution
To make your code work you should create another element, let's say a <p> element, and display the text inside of it. Here's an example of a correct page:
<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="btn">Click me!</button>
<p id="txt">Times clicked: 0</p>
<script type="text/javascript">
function showText() {
count++;
text.textContent = "Times clicked: " + count;
}
var count = 0,
button = document.getElementById("btn"),
text = document.getElementById("txt");
button.addEventListener("click", showText);
</script>
</body>
</html>
Check out a live demo here.

javascript fails to execute mapquest api

I would like for this code to alert the users with their perspective addresses, but for some reason it's not executing. Can someone point me on the right direction?
Thanks!
<html>
<head>
<title>geoload</title>
<script type="text/javascript" src="http://www.mapquestapi.com/geocoding/v1/reverse?key=MY_DEV KEY GOES HERE=40.0755&lng=-76.329999&output=json&callback=renderGeocode"></script>
<script type="text/javascript">
function renderGeocode(response){
var location = response.results[0].locations[0];
alert(location.adminArea5 + ", " + location.adminArea4);
}
</script>
</head>
<body onload=(load"renderGeocode")></body>
</html>
You've missed a + sign:
alert(location.adminArea5 + ", " + location.adminArea4);
^
The body onload is not required, as the call to the mapquestapi includes a callback parameter. The callback parameter is renderGeocode which will call the javascript function of the same name. See code below:
<html>
<head>
<title>geoload</title>
<script type="text/javascript" >
function renderGeocode(response) {
console.log(response)
}
</script>
<script type="text/javascript" src="http://www.mapquestapi.com/geocoding/v1/reverse?key=MY_DEV KEY GOES HERE&lat=40.0755&lng=-76.329999&callback=renderGeocode" ></script>
</head>
<body></body>
</html>

Variable not sent to other function

I have a number of links, that when clicked on, passes a variable thru to another portion of the page.
Yet, for some reason, I can’t figure it out! What am I missing?
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
return myid;
}
</script>
</head>
<body>
Click Me<br />
<script type="text/javascript">
document.write(myid);
</script>
</body>
You are getting a little mixed up here. Even though the function returns a value, it has nothing to return it to. Try this:
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
document.getElementById("debug").innerHTML = myid;
}
</script>
</head>
<body>
Click Me<br />
<div id="debug"></div>
</body>
if you want to use it later you need to declare myid as a global variable. its scope is currently only within myFunction. also the document.write() function will only execute at runtime so you need to have another function the executes that with every click, or just combine the two.
When you click the link all that happens is that the myFunction() is called which returns the string. The line document.write(myid); is not executed anymore so nothing is visible.
<script>
// This is global
var myid = ''
myfunc = function(a){
myid = "Hi There!" + a;
alert(myid);
}
test_global = function(){
alert(myid);
}
</script>
Set MYID
<input type="button" onclick="test_global();" value="Test MYID" />
Here is a simple example of some similar stuff:
clickme or ClickMeAlso
<input id='other' type='text'/>
<script>
function myfunc(a) {
return a + " howdy";
};
</script>
You can see this in action here:http://jsfiddle.net/5Sbn2/

Categories

Resources