简体   繁体   English

使用javascript更改html元素的href

[英]Change html element's href using javascript

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. 我想仅使用javascript更改现有的HTML主题,并且在使用javascript更改HTML元素的href时遇到问题。 But it seems I can't even get the elements by ClassName because the console.log value of javascript code below shows 0 length. 但似乎我什至无法通过ClassName来获取元素,因为下面的javascript代码的console.log值显示为0长度。 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). (请注意,我无法编辑现有的HTML代码,只能编写JavaScript的自定义代码)。 Best regards 最好的祝福

My javascript is as below: 我的JavaScript如下:

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): 我的HTML如下(部分内容):

                <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 第二个控制台日志结果:无结果

The code is working fine here. 该代码在这里工作正常。 Your script is running before the the loading of html.You can 您的脚本在加载html之前运行。您可以

  1. Move your <script> tag at end of the <body> <script>标记移到<body>末尾
  2. Or use the window.onload event 或使用window.onload事件

 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> 

It seems you are running the javascript before the dom is loaded. 似乎您在加载dom之前正在运行javascript。 Add javascript or add the external js file near the closing end of body tag 在body标签的结尾附近添加JavaScript或添加外部js文件

<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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM