function chumpage() {
chump = document.getElementByClassName("first-txt");
for (var i = 0; i < chump.length(); i ) {
chump[i].innerText = "temp3";
}
}
<head>
<style>
.temp {
margin: 3%;
position: relative;
}
.first-txt {
position: absolute;
top: 17px;
left: 50px;
}
.second-txt {
position: absolute;
bottom: 20px;
left: 10px;
}
</style>
</head>
<body>
<div >
<img src="">
<h3 >
Temp1
</h3>
<h3 >
Temp2
</h3>
</div>
</body>
</html>
So my goal here is to change the contents of temp1 to temp3 using js, however the above function is not working, the image not being present right now is not an issue. I would appreciate any guidance.
CodePudding user response:
First you need to call the method, and it's not getElementByClassName
it's getElementsByClassName
.
And chump.length is not a function.
function chumpage() {
const chump = document.getElementsByClassName("first-txt");
for (var i = 0; i < chump.length; i ) {
chump[i].innerText = "temp3";
}
}
chumpage();
<head>
<style>
.temp {
margin: 3%;
position: relative;
}
.first-txt {
position: absolute;
top: 17px;
left: 50px;
}
.second-txt {
position: absolute;
bottom: 20px;
left: 10px;
}
</style>
</head>
<body>
<div >
<img src="">
<h3 >
Temp1
</h3>
<h3 >
Temp2
</h3>
</div>
</body>
</html>
CodePudding user response:
You misspelled
document.getElementByClassName("first-txt");
Change it to :
document.getElementsByClassName("first-txt");
And chump.length
not chump.length()
Code same as :
function chumpage() {
chump = document.getElementsByClassName("first-txt");
for (var i = 0; i < chump.length; i ) {
chump[i].innerText = "temp3"
}
}
chumpage()
.temp {
margin: 3%;
position: relative;
}
.first-txt {
position: absolute;
top: 17px;
left: 50px;
}
.second-txt {
position: absolute;
bottom: 20px;
left: 10px;
}
<div >
<img src="">
<h3 >
Temp1
</h3>
<h3 >
Temp2
</h3>
</div>
CodePudding user response:
Try this:
function chumpage() {
var chump = document.getElementsByClassName('first-txt');
for (var i = 0; i < chump.length; i ) {
chump[i].innerText = "temp3";
}
}