How to Change Href of <A> Tag on Button Click Through JavaScript

How to change href of a tag on button click through javascript

Without having a href, the click will reload the current page, so you need something like this:

<a href="#" onclick="f1()">jhhghj</a>

Or prevent the scroll like this:

<a href="#" onclick="f1(); return false;">jhhghj</a>

Or return false in your f1 function and:

<a href="#" onclick="return f1();">jhhghj</a>

....or, the unobtrusive way:

<a href="#" id="abc">jhg</a>
<a href="#" id="myLink">jhhghj</a>

<script type="text/javascript">
  document.getElementById("myLink").onclick = function() {
    document.getElementById("abc").href="xyz.php"; 
    return false;
  };
</script>

convert a href tag to button onclick

Maybe something like this??

// Get the transition timing
var getTiming = function (elem) {
    var timing = 350;
    if (elem.classList.contains('show-fast')) {
        timing = 100;
    }
    if (elem.classList.contains('show-slow')) {
        timing = 2000;
    }
    return timing;
};

// Show an element
var show = function (elem) {

    // Get the transition timing
    var timing = getTiming(elem);

    // Get the natural height of the element
    var getHeight = function () {
        elem.style.display = 'block'; // Make it visible
        var height = elem.scrollHeight + 'px'; // Get it's height
        elem.style.display = ''; //  Hide it again
        return height;
    };

    var height = getHeight(); // Get the natural height
    elem.classList.add('is-visible'); // Make the element visible
    elem.style.height = height; // Update the max-height

    // Once the transition is complete, remove the inline max-height so the content can scale responsively
    window.setTimeout(function () {
        elem.style.height = '';
    }, timing);

};

// Hide an element
var hide = function (elem) {

    // Get the transition timing
    var timing = getTiming(elem);

    // Give the element a height to change from
    elem.style.height = elem.scrollHeight + 'px';

    // Set the height back to 0
    window.setTimeout(function () {
        elem.style.height = '0';
    }, 1);

    // When the transition is complete, hide it
    window.setTimeout(function () {
        elem.classList.remove('is-visible');
    }, timing);

};

// Toggle element visibility
var toggle = function (elem, timing) {

    // If the element is visible, hide it
    if (elem.classList.contains('is-visible')) {
        hide(elem);
        return;
    }

    // Otherwise, show it
    show(elem);

};

// Listen for click events
document.addEventListener('click', function (event) {

    // Make sure clicked element is our toggle
    if (!event.target.classList.contains('toggle')) return;

    // Prevent default link behavior
    event.preventDefault();

    // Get the content
    var content = document.querySelector(event.target.hash);
    if (!content) return;

    // Toggle the content
    toggle(content);

}, false);

.toggle-content {
    display: none;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
}

.show-fast {
    transition: height: 100ms ease-in-out, opacity 300ms ease-in-out;
}

.show-slow {
    transition: height: 2000ms ease-in-out, opacity 2500ms ease-in-out;
}

.toggle-content.is-visible {
    display: block;
    height: auto;
    opacity: 1;
}

.mybutton { padding:10px;
    border:0px;
    border-radius:20px;
    background-color:green;
    
    }
    
.mybutton > a {
    text-decoration:none;
    color:white;
    font-size:18px;}

<p>
  <button class="mybutton">
    <a class="toggle" href="#example">Toggle Div (normal speed)</a>
  </button>
  
</p>

<div class="toggle-content" id="example">
    This content reveals when click on button.
</div>

How to change href attribute using JavaScript after opening the link in a new window?

Your onclick fires before the href so it will change before the page is opened, you need to make the function handle the window opening like so:

function changeLink() {
    var link = document.getElementById("mylink");

    window.open(
      link.href,
      '_blank'
    );

    link.innerHTML = "facebook";
    link.setAttribute('href', "http://facebook.com");

    return false;
}

Change href tag based on button press

You're actually better off removing the form and just using a button. You could do what you have above like this...

HTML

<input type="text" id="myInput" class="search left" value="" autofocus/>
<button class="go" id="search-button">GO!</button>

Javascript

$(function() {

    $("#search-button").on("click", function() {

        var query = $("#myInput").val();

        // if using Google search...
        location.href = "https://www.google.ca/#q=" + query;

        // if using Youtube search...
        location.href = "http://www.youtube.com/results?search_query=" + query;

    }); 
});

how to change href during onclick event

Prevent the default click behavior, change the href attribute, and then imitate the click. Should work.

$( "a" ).click(function( event ) {
  event.preventDefault();
  $("#controlDownloadJPEG").attr("href", "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl);
  $(this).click();
});

---

Related Topics