change the href dynamically

Question

how i can change or add the href Attribute to a tag using javascript with condition for example if the value were between 10 and 15 add this path link and so on

and here is the code,, can anyone help me

<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

when you `getElementsByClassName` it will return `array` of `elements` as there can be multiple `elements` with same `class` name. So I would suggest using `getElementsById` or if you are sure there is only one `element` with that `className` do `getElementsByClassName[0]` and then you can do `a.setAttribute('href','../result/result1.html')` — Guruprasad J Rao, Nov 18 '15 at 10:04
Calling the function `result()` without arguments makes also no sense, since the function logic is based completely on the assigned arguments. Since you declared those variables as global, which is by the way very bad practice, omit them and define the function without parameters: `function result()`. Than follow the advice from @GuruprasadRao. — cezar, Nov 18 '15 at 10:08
When you declare a variable like `var vo;` you should only assing a value later, not redeclare it. The line after should therefore start without the keyvord `var`: `vo = document.querySelector ...` — cezar, Nov 18 '15 at 10:10
thank you for your reply but i try what you told but nothing happened — Ahmed Teir, Nov 18 '15 at 10:11
Possible duplicate of [How to add a new attribute to a tag](http://stackoverflow.com/questions/17622654/how-to-add-a-new-attribute-to-a-tag) — cvakiitho, Nov 18 '15 at 10:12

Vi100 · Answer 1 · 2015-11-18T10:22:45.007

Ahmed Teir, nothing happens because when you provide an onclick handler to an anchor it overrides the behaviour of the href attribute...

If you want to navigate to another page when you click the link then do this:

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

If you just want to change the href attribute of the anchor but to stay on the same page then do this:

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

score 0 · Answer 2 · answered Nov 18 '15 at 10:17

getElementsByClassName and querySelector both will return array of elements and your is code logically wrong here the way how to do it

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

change the href dynamically

2 Answers2