pass variable when click button in js [duplicate] - javascript

This question already has answers here:
How to pass variable value between different html pages in javascript
(5 answers)
How do I share a global variable between multiple files?
(1 answer)
Closed 2 years ago.
I have a problem to pass variable in js!
I have two html page and each of html page has a js script. I want when click a button in first html a variable pass to another js file.
my first html(index.html) is :
// test.js
var vari;
document.getElementById("btn").addEventListener("click", function() {
vari = 10;
window.location.href = "./index2.html";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>test</p>
<button id="btn">click</button>
<script src="./test.js"></script>
</body>
</html>
and script of this html is (test.js):
I want when click to btn go to html2(index2.html) and and vari pass to js2(test2.js)!
my html2(index2.html) is :
// test.js
var vari;
document.getElementById("btn").addEventListener("click", function() {
vari = 10;
window.location.href = "./index2.html";
});
// test2.js
console.log(vari);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./test.js"></script>
<script src="./test2.js"></script>
</body>
</html>
But in test2.js vari is undefined.
How can I solve this problem?

Save the variable in sessionStorage. Instead of
vari = 10;
do
sessionStorage.vari = 10;
And then you can retrieve it in test2.js:
console.log(sessionStorage.vari);
Note that storage will always contain a string. If the type matters, make sure to transform back to a number:
const vari = Number(sessionStorage.vari);
For an even more general solution, to transfer any sort of serializable data, use JSON.stringify when saving and JSON.parse when retrieving.

Related

In javascript innerhtml.replace function is not working [duplicate]

This question already has answers here:
`string.replace` doesn’t change the variable [duplicate]
(4 answers)
Closed 12 months ago.
I have below code and i am trying to replace regex with another text but it is not working any suggestion what. i am doing wrong?
const regex = /\?/g;
let p = document.querySelectorAll('.test');
p.forEach((pa) => {
pa.style.color = 'red';
pa.innerHTML.replace(regex, 'test');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="test">This one was, hopefully, quite straightforward although? it did get a bit more complicated as a? previous exercise had created multiple paragraph tags on the page. It’s a good bit of string! manipulation practice too.Got your own solution for this?;</p>
</body>
<script src="app2.js"></script>
</html>
Like Ivar mentioned you need to set the innerhtml.
pa.innerHTML = pa.innerHTML.replace(regex, 'test');
const regex = /\?/g;
let p = document.querySelectorAll('.test');
p.forEach((pa) => {
pa.style.color = 'red';
pa.innerHTML = pa.innerHTML.replace(regex, 'test');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="test">This one was, hopefully, quite straightforward although? it did get a bit more complicated as a? previous exercise had created multiple paragraph tags on the page. It’s a good bit of string! manipulation practice too.Got your own solution for this?;</p>
</body>
<script src="app2.js"></script>
</html>

What is wrong with my JavaScript DOM code to print a simple text?

I have to print "Hello, Mars", but something is wrong. I've tried to add paragraph.appendChild(text) too but it not works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const body = document.getElementById("body")
const paragraph = document.createElement("p")
const text = document.createTextNode("Hello, Mars")
body.appendChild(paragraph)
</script>
</body>
</html>
Two things here:
Firstly, you never add text to the created paragraph, which would be done by adding this:
paragraph.appendChild(text);
Secondly, using getElementById() you are selecting an item that would have id="body", not the <body> element on your page. You can get the body using document.body as follows:
const body = document.body;

Is it possible to choose JavaScript runtime environment (rhino...etc) when sourcing a JavaScript file in html?

Is it possible to choose JavaScript runtime environment (rhino...etc) when sourcing a JavaScript file in html ??
<script type="text/javascript" src="file.js"></script>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="file_1.js"></script>
<script src="file_2.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<p id="test">abc</p>
</body>
file_1.js:
window.paragraph = readFile('file_to_read.tcl');
localStorage.setItem("paragraph", paragraph);
file_2.js:
setTimeout(function(){
document.getElementById("test").innerHTML = window.paragraph;
}, 3000);
need to read the "file_to_read.tcl" and then pass the "paragraph" variable to the second js file "file_2.js"
but still finding this issue : "ReferenceError: readFile is not defined"
thanks

How to fix the error "uncaught reference error: data is not defined" using javascript?

i want to log some value onto console on clicking a button by reading the function from scripts.js file from index.html file.
below is my code,
within index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="src/styles.css">
<script src="src/scripts.js"></script>
</head>
<body>
<button onClick="data()">click</button>
</body>
</html>
within scripts.js file
function data() {
const data = "3";
console.log('data');
}
in doing this, i get error like below,
"uncaught reference error: data is not defined at HTMLButtonElement.onclick"
not sure what is causing the problem. could someone help me with this. thanks.
EDIT:
in the source tab i see this
in the networks tab i see scripts.13aae5c5.js file being called.
EDIT2:
i have tried to create a div with id message and change its content with js code in scripts.js file and it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<h2>here i am </h2>
<div id="message"></div>
<script src="src/scripts.js"></script>
<button onclick="data">click</button>
</body>
in scripts.js file
function data() {
console.log('data');
}
document.getElementById('message').innerText = "Hello World!";
it displays hello world message but on clicking button it says uncaught reference error data not defined
Basicly there is nothing wrong here, exept you should considder binding your events in JS. BUT: This looks like you have some sort of preprocessor, like webpack or browserify, active at your project.
The preprocessors or packer will wrap your code in a seperate scope to prevent filling up the global space.
a small example:
// the code:
function data() {
return 'some data';
}
// will be converted to something like this (Boiled down for understanding)
(function(){
function data() {
return 'some data';
}
})()
The (function(){ ... })() is called a self executing function and will provide a encapsulation to your code. What is the purpose of a self executing function in javascript?
<button onClick="data()">click</button> on the other side will need method data in the global scope, or to be exact: window.data has to be set!
so you have two options right here:
bind the data method to the global scope
bind your event using js
function data() {
console.log('call to data');
}
// bind to global scope (not nice!)
window.data = data;
// onload method
function onload() {
console.log('onload');
}
window.onload = onload;
// bind event using JS (Waaaay nicer!)
// wait for Dom is loaded: https://developer.mozilla.org/de/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
onload();
// get the element
const button = document.getElementById('test');
if(button) {
// bind event
button.addEventListener('click', data)
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="src/styles.css">
<script src="src/scripts.js"></script>
</head>
<body onload="onload()">
<button id="test" onClick="data()">click</button>
</body>
</html>

why does this code returns undefined value? [duplicate]

This question already has answers here:
Setting innerHTML vs. setting value with Javascript
(8 answers)
Closed 2 years ago.
Why is the console.log statement returning undefined?
Even though the id of the tag is right so it should return the value stored in the <p> tag?
x=document.getElementById("pppp").value //assigning the value of <p> tag to x
console.log(x) //printing the value of x in console
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>blabla</title>
</head>
<body>
<p id="pppp">dvshjb</p>
</body>
</html>
value property used to access the VALUE of the Form Element.
In your case, I assume you are trying to access the text of the Element. Node.textContent is ideal here.
var x = document.getElementById("pppp").textContent;
console.log(x);
<p id="pppp">dvshjb</p>
p tag does not have any value attribute. It seems you need the text content. In this case use innerHTML. trim() will be used to remove white space
let x = document.getElementById("pppp").innerHTML.trim()
console.log(x)
<p id="pppp">dvshjb</p>
P tag does not have value property. For div, p, span, etc. you can access innerHTML.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>blabla</title>
</head>
<body>
<p id="pppp">dvshjb</p>
<script>
x=document.getElementById("pppp").innerHTML
console.log(x)
</script>
</body>
</html>
Replace the value to innerHtml
From:
x=document.getElementById("pppp").value;
console.log(x);
To:
x=document.getElementById("pppp").innerHTML;
console.log(x);
The "value" property is used for inputs. You should use "innerText" as follows:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>blabla</title>
</head>
<body>
<p id="pppp">dvshjb</p>
<script>
x=document.getElementById("pppp").innerText //assigning the value of <p> tag to x
console.log(x) //printing the value of x in console
</script>
</body>
</html>

Categories