0

细节：

嗨专家。我想仅使用 javascript 更改现有的 HTML 主题，并且在使用 javascript 更改 HTML 元素的 href 时遇到问题。但似乎我什至无法通过 ClassName 获取元素，因为下面 javascript 代码的 console.log 值显示为 0 长度。请帮助我应该如何修复代码。（注意我不能编辑现有的 HTML 代码，只能编写 javascript 的自定义代码）。此致

我的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()";
}

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

第一个控制台日志结果：

length=0

第二个控制台日志结果：没有结果

4

2 回答 2

1

代码在这里工作正常。您的脚本在加载 html 之前正在运行。您可以

  1. 将<script>标签移到末尾<body>
  2. 或者使用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>

于 2019-02-22T04:08:09.637 回答
0

看来您在加载 dom 之前正在运行 javascript。添加 javascript 或在 body 标记的结尾附近添加外部 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>

于 2019-02-22T04:07:31.570 回答