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 class="temp">
<img src="">
<h3 class="first-txt">
Temp1
</h3>
<h3 class="second-txt">
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.
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 class="temp">
<img src="">
<h3 class="first-txt">
Temp1
</h3>
<h3 class="second-txt">
Temp2
</h3>
</div>
</body>
</html>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 class="temp">
<img src="">
<h3 class="first-txt">
Temp1
</h3>
<h3 class="second-txt">
Temp2
</h3>
</div>Try this:
function chumpage() {
var chump = document.getElementsByClassName('first-txt');
for (var i = 0; i < chump.length; i++) {
chump[i].innerText = "temp3";
}
}