Is there a way to change the href of an a tag with javascript

Question

I need to change the href of the a tag with id="cont". The code I've got so far.(I was told to post the whole code here)

HTML:

<html>

<head>
    <title>Adventure Game</title>
    <link rel="stylesheet" href="../../styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="../../js/main.js"></script>
    <script src="../../js/knightClass.js"></script>
    <script src="../../js/choices.js"></script>
</head>

<body>

    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="../../home.html"><i class="fa fa-fw fa-home"></i>Home</a>
        <a href="../../how.html">How 2 Play</a>
        <div>
            <button onclick="goBack()">Back</button>
        </div>
    </div>
      
    <!-- Use any element to open the sidenav -->
    <span onclick="openNav()"><div class="menu">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </span>
      
    <div id="main">
        <h1 class="header"><b>Stage 2 - Knight1</b></h1>
        <div id="options" class="option hide">
            <a id="cont" href="#">Continue</a>
            <!--<a href="hero/hero1.html">Hero</a>
            <a href="paladin/paladin1.html">Paladin</a>
            <a href="holyKight/holyKnight1.html">Holy Knight</a>
            <a href="assassin/assassin1.html">Assassin</a>-->
        </div>
    </div>

</body>

</html>

JavaScript

window.onload=function(){
    setTimeout(knight,1);
}
function knight(){
    let rand=Math.floor(Math.random() * 10) + 1;

    var cont=document.getElementById("cont");

    if (rand==10){
        cont.href("hero/hero1.html");
    } else if (rand>=7){
        cont.href("paladin/paladin1.html");
    } else if (rand>=3){
        cont.href("holyKnight/holyKnight1.html");
    } else if (rand<3){
        cont.href("assassin/assassin.html");
    }
}

Your logic chain is incorrect. Note that 3 is less than 7. Also, you don't need `.setAttribute()`; `cont.href = "whatever"` will work fine. — Pointy, Jul 05 '21 at 18:13
The code you have do far **does** change the `href`. Did you have a question? — Quentin, Jul 05 '21 at 18:20
when I click the a tag it doesnt send me to one of the files — GalaxyGamerYT, Jul 05 '21 at 18:44
@GalaxyGamerYT — The code in the question is fine. It clearly does work. There's a live demo, clicking the link navigates away from the page with the link in it. (To pages that don't exist on Stackoverflow, but that's by the by). Your new code is browser, `href` is not a function. the code you had already was fine. (Maybe you have some other code you are testing which doesn't work, but if that is the case you didn't include the problem when you copied the code to SO.) — Quentin, Jul 05 '21 at 18:59

score 1 · Accepted Answer · answered Jul 06 '21 at 14:06

1

<a href="#" id="a" onclick="ChangeHref()">1.Change 2.Go</a>

<script>
function ChangeHref(){
document.getElementById("a").setAttribute("onclick", "location.href='http://religiasatanista.ro'");
}
</script>

Ref Link

answered Jul 06 '21 at 14:06

Pirta Matharu

267
1
5
22

Is there a way to change the href of an a tag with javascript

1 Answers1