Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How can i change the href of <a> of a button when i change the language of the site?

Okay, so here is the thing, i made a site in which you can change it into two different languages (spanish an english) and i have a button that everytime you click on it, redirects you to a pdf file which its in spanish but what should happen its that when the text on the button changes to english the file also changes to the file in english

Here its the button

<div data-aos="fade-up" data-aos-delay="800" class="text-center">
          <a href="assets/img/File1.pdf" class="btn-get-started scrollto">Ver CV</a>
            
          </div>

So the idea its that the href of the changes its value for the second file (which would be in english), i tried with only Javascript and also with JQuery, what i expect its that whenever the site its on english when clicking the button they’ll see the file in English and when the button would be in spanish they’ll see the file in spanish

<div data-aos="fade-up" data-aos-delay="800" class="text-center">
          <a href="assets/img/File2.pdf" class="btn-get-started scrollto">Ver CV</a>
            
          </div>
Tags:

2

Answers


  1. 0

    Okay, if I understand right… It’s a basic JS solution.

    Here’s the HTML

    <div data-aos="fade-up" data-aos-delay="800" class="text-center">
<a id="cvButton" href="assets/img/File1.pdf" class="btn-get-started scrollto">Ver CV</a>

    Here’s the JS

    let btn = document.querySelector('#cvButton');

function updateCV(language) {
    
    if (language === 'english') {
        btn.href = 'assets/img/File2.pdf'; // Update to English 
    } else {
        btn.href = 'assets/img/File1.pdf'; // Remains Spanish
    }
}


updateCV('english'); // <- This is the command-line that invokes this function.

    Inject updateCV 👆 inside the other button/function that request the language-change.

    Login or Signup to reply.
  2. 0

    If by changing language the website is refreshed you could use a server-side variable to define the link like i.e in PHP template:

    <a data-lang="en" href="assets/img/File<?= $lang ?>.pdf" class="btn-get-started scrollto">Ver CV</a>

    Otherwise,
    however you change the website’s language (not clear from your question) you should also change

    <html lang="en">

    into

    <html lang="es">

    and given you have this HTML:

    <div data-aos="fade-up" data-aos-delay="800" class="text-center">
  <a data-lang="en" href="assets/img/File1.pdf" class="btn-get-started scrollto">Ver CV</a>
  <a data-lang="es" href="assets/img/File2.pdf" class="btn-get-started scrollto">Ver CV</a>   
</div>

    than it’s all about CSS:

    html[lang="en"] [data-lang="es"], 
html[lang="es"] [data-lang="en"] {
   display: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search