Change html element's href using javascript

Question

Details:

Hi experts. I want to change an existing HTML theme using only javascript, and I have problem in changing HTML element's href using javascript. But it seems I can't even get the elements by ClassName because the console.log value of javascript code below shows 0 length. Please help how should I fix the code. (Note that I can't edit the existing HTML code, only can write custom code of javascript). Best regards

My javascript is as below:

var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
console.log("length=",x8.length); --1st console
if (x8.length > 0){
console.log("ENTERED. length=", x8.length); --2nd console
x8[0].href = "javascript:history.back()";
}

My HTML is as below (some part of it):

                <div class="slrofrpg-service-btn">
                  <a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
                  </a>
                  <!-- react-text: 219 --> 
                  <!-- /react-text -->
                  <a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
                  </a>
                </div>

1st console log result:

length=0

2nd console log result: No result

Sounds like your script is running before the elements exist on the page. — CertainPerformance
– CertainPerformance, Commented Feb 22, 2019 at 4:02

Maheer Ali · Accepted Answer · 2019-02-22 04:08:09Z

The code is working fine here. Your script is running before the the loading of html.You can

Move your <script> tag at end of the <body>
Or use the window.onload event

window.onload = function(){
  var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
  console.log("length=",x8.length);
  if (x8.length > 0){
    console.log("ENTERED. length=", x8.length);
    x8[0].href = "javascript:history.back()";  
  }
}

<div class="slrofrpg-service-btn">
                  <a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
                  </a>
                  <!-- react-text: 219 --> 
                  <!-- /react-text -->
                  <a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
                  </a>
                </div>

You're right, it works but i think this is the best practice

brk · Accepted Answer · 2019-02-22 04:07:31Z

It seems you are running the javascript before the dom is loaded. Add javascript or add the external js file near the closing end of body tag

<body>
   // html code
 <script>
   //js code here
 </script>
</body>

var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
console.log("length=", x8.length);

if (x8.length > 0) {
  console.log("ENTERED. length=", x8.length);

  x8[0].href = "javascript:history.back()";
}

<div class="slrofrpg-service-btn">
  <a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
                  </a>
  <!-- react-text: 219 -->
  <!-- /react-text -->
  <a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
                  </a>
</div>

Collectives™ on Stack Overflow

Change html element's href using javascript

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related