Question

如何使用带条件的javascript更改或添加href属性到标签，例如，如果值介于10和15之间，请添加此路径链接等等

这是代码，任何人都可以帮助我

<a class="smt" href="#" onclick="result()">go
</a><input type="text" name="sum"/>

var vo;
var vo = document.querySelector('[name="sum"]').value; //take value from textbox
var a = document.getElementsByClassName("smt"); 
function result(vo,a){
    if(vo >= 10 && vo <= 15){
   a.href ="../result/result1.html";       
    }
}

codepen

Answer 1

Ahmed Teir，没有任何反应，因为当你向一个锚提供一个onclick处理程序时它会覆盖href属性的行为......

如果要在单击链接时导航到其他页面，请执行以下操作：

<a id="myLink" href="#" onclick="var vo = document.querySelector('[name="sum"]')[0].value; if (vo >= 10 && vo <= 15) window.location.href = '../result/result1.html';">link text</a>

如果您只想更改锚点的href属性但要保持在同一页面上，请执行以下操作：

<a id="myLink" href="#" onclick="this.href = '../result/result1.html';return false;">link text</a>

Answer 2

getElementsByClassName和querySelector两者都会返回元素数组，而你的代码在逻辑上是错误的，如何做到这一点

var vo;
var vo = document.querySelectorAll('[name="sum"]')
var a = document.getElementsByClassName("smt"); 

(vo[0]).addEventListener("keyup", function(){
       if(vo[0].value >= 10 && vo[0].value <= 15){
         a[0].href ="../result/result1.html";       
    }else{
        a[0].href ="#";       
    }
    console.log(vo[0].value >= 10 && vo[0].value <= 15)
});

<a class="smt" href="#" onclick="result()">go
</a><input type="text" name="sum" id="inpt"/>

动态更改href

2 个答案: