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>
Related
This question already has answers here:
what is the purpose of using demo or root
(4 answers)
Error: Target container is not a DOM element with React
(2 answers)
Closed 9 months ago.
<!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 src="https://unpkg.com/react#18.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel">
//app code
ReactDOM.render(
<h1 id = "my-heading">
Hello world!
</h1>,
document.getElementById('app')
)
</script>
</body>
</html>
Right now, I am trying to learn React, and according to the book I am reading, this should work. I am confused on why Babel isn't working the way I thought it would. If anyone could advise me, that would be great.
Thanks in advance
I am looking to manipulate the DOM of a page and in one area I need to return the below:
<p class="styles_label__gDrbZ"><span>PHL</span><span>Review</span></p>
As
<p class="styles_label__gDrbZ"><span>PHL</span> <span>Review</span></p>
I cannot seem to work out how to do this - any help much appreciated
There are multiple ways to achieve this, two approaches which immediately I can think of is -
:nth-child() Selector
.insertAfter()
Below is the implmentation using the :nth-child(), selecting the first child which is the <span> tag within the <p> tag.
<!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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p span:nth-child(1)").append(" ");
});
</script>
</head>
<body>
<p class="styles_label__gDrbZ"><span>PHL</span><span>Review</span></p>
</body>
</html>
This question already has answers here:
JS function named `animate` doesn't work in Chrome, but works in IE
(3 answers)
Closed 1 year ago.
I am new to JS so please bear with me :)
below is the code but on clicking it does not trigger the function
<!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>
<button type="submit" onclick="evaluate()">Submit</button>
</body>
<script type="text/javascript">
function evaluate(){
document.write("Working");
};
</script>
</html>
evaluate() is a reserved function in JavaScript. Name your function something else.
The fact that the console error mentioned the need for two arguments was a clue that the function was defined somewhere already, and that your definition wasn't being considered.
<!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>
<button type="submit" onclick="notEvaluate()">Submit</button>
</body>
<script type="text/javascript">
function notEvaluate() {
document.write("Working");
};
</script>
</html>
Regarding document.write, see Why is document.write considered a "bad practice"?.
Try using a function name different than "evaluate" - evaluate is a reserved function name
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;
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.