Change <a> href based on select by Javascript and Elementor

Question

I am currently using an HTML item within Elementor. I have seen similar questions, but none of the Javascript seems to work with what I am trying to do. I need to be able to change the href of an tag based on what is selected in the select. I have tried to remove the href then add the new one. I have tried a few different options on what I have seen, but none of them seem to work. Any help would be appreciated. This is the current code that I have, but when it runs it only accepts 1 href and then it will not change after that. This is changed when a different item is selected from the select.

My HTML is as follows: <a class="ButtonClassAdd" id="ButtonClassAdd" href="#" onclick="AddSingle();return false;" rel="nofollow">Add to Cart</a> <a class="ButtonClassAdd" id="ButtonClassAdd" href="#" onclick="AddSingle();return false;" rel="nofollow">Add to Cart</a>

Then my Javascript is:

function ChangeHref()
{
     switch (StrUser)
     {
           case "Product1":
                var AddtoCartLink =  document.getElementById("ButtonClassAdd");
                AddtoCartLink.href = "Product1Link";
                break;
           case "Product2":
                var AddtoCartLink =  document.getElementById("ButtonClassAdd");
                AddtoCartLink.href = "Product2Link";
                break;
     }
}

I have also tried:

function ChangeHref()
{
     switch (StrUser)
     {
           case "Product1":
                var AddtoCartLink =  document.getElementById("ButtonClassAdd");
                AddtoCartLink.removeAttribute("href");
                AddtoCartLink.setAttribute("href", "ProductLink1");
                break;
           case "Product2":
                var AddtoCartLink =  document.getElementById("ButtonClassAdd");
                AddtoCartLink.removeAttribute("href");
                AddtoCartLink.setAttribute("href", "ProductLink2");
                break;
     }
}

Edit: I have updated my HTML. This works, but I need to not redirect.

<div class="ButtonContainter" style="width:200pt;">
    <div class="ButtonClass"  style="padding-left:65pt;">
    <a class="ButtonClassAdd" id="ButtonClassAdd"  rel="nofollow">Add to Cart</a>
</div>

Answer 1

I'm a little confused by the HTML snippet that you posted, because the onclick attribute of the <a> tag isn't calling the javascript function you provided? Also, you could likely safely remove the ; return false; ; return false; from that tag. Lastly, make sure that the javascript code is included at the bottom of the page.

Your first javascript solution should work (source: https://www.w3schools.com/jsref/prop_anchor_href.asp )