How to make a button that changes value and text

Question

I want to create a translation button for my site but I want the button's value to change when text changes as well so far I have come to this but I need to use the button to switch divs and button value

With my minimal code knowledge I am under the impression that my code is interfering and therefore not working

 $('.orange').hide(); $('.gray p,.orange p').click(function(){ $('.gray,.orange').toggle(); }); $('#myButton1').click(function(){ $('#badd').val('SAVE'); } 

 .blue{ background:#1ecae3; float:left; } .gray{ background:#eee; float:left; } .orange{ background:#fdcb05; float:left; } 

  <input type="button" value="English" id="myButton1" onclick="change()"> <div class="gray" id="myDIV"> <p>english</p> </div> <div class="orange" id="myDIV"> <p>greek</p> </div> 

Answer 1

You dont need button inside onclick event when you are using jquery. You have to use toggle in button click event and ids need to be unique. This code may help you:

 $('.orange').hide(); $('#myButton1').click(function(){ $('.gray,.orange').toggle(); }) $(".gray").click(function(){ $("#myButton1").prop('value', $(this).text()); }) $(".orange").click(function(){ $("#myButton1").prop('value', $(this).text()); }) 

 .blue{ background:#1ecae3; float:left; } .gray{ background:#eee; float:left; } .orange{ background:#fdcb05; float:left; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" value="English" id="myButton1" > <div class="gray" id="myDIV"> <p>english</p> </div> <div class="orange" id="myDIV2"> <p>greek</p> </div> 

Answer 2

Firstly, you can remove the <input> as it isn't necessary to achieve what you want. Rather use the div that has the background colour and the language as the button.

For example:

<div class="gray" id="myDIV">
  <p>english</p>
</div>

Secondly, you should never give an ID to more than one element on a single page, so remove id="myDiv" from those divs, and rather add a class to define them all such as languageSelect .

You can also use a custom attribute to define the language you want to switch to for your jQuery function. In this case, you can simply use language="" . Note, this does nothing other than store a value for you to use in your jQuery.

Your HTML should look like: (I also capitalised the first letter for each language in the <p> tags).

<div class="gray languageSelect" language="english">
  <p>English</p>
</div>
<div class="orange languageSelect" language="greek">
  <p>Greek</p>
</div>

<div class="englishContentDiv contentDiv">
  English text/elements here.
</div>

<div class="greekContentDiv contentDiv">
  Greek text/elements here.
</div>

For your script, I hope you aren't adding it into the page like that? You should either have it in a script file, or a script tag.

Using jQuery, you can change the html of any element using the .html() function.

$(document).ready(function(){
  $('.languageSelect').click(function(){
    if($(this).attr('language') == 'english'){//if user clicked on English, change buttons to English language
      $('.languageSelect[language="english"] p').html('English');
      $('.languageSelect[language="greek"] p').html('Greek');
    }
    if($(this).attr('language') == 'greek'){//if user clicked on Greek, change buttons to Greek language
      $('.languageSelect[language="english"] p').html('Αγγλικά');
      $('.languageSelect[language="greek"] p').html('Ελληνικά');
    }
  });  
});

This code will now change the text inside your divs.

You can add this to your css:

.languageSelect{
  cursor: pointer;
}

Now you will need it to change the language of whatever other elements are on your page, without seeing the HTML or what ever else you've done, I can't really help with that.

But it would be inside your $('.languageSelect').click(function(){ and you can just show/hide the english/greek depending on which is clicked.

 $(document).ready(function(){ $('.languageSelect').click(function(){ if($(this).attr('language') == 'english'){//if user clicked on English, change buttons to English language $('.languageSelect[language="english"] p').html('English'); $('.languageSelect[language="greek"] p').html('Greek'); $('.contentDiv').hide();//hide any other language $('.englishContentDiv').show();//show English content } if($(this).attr('language') == 'greek'){//if user clicked on Greek, change buttons to Greek language $('.languageSelect[language="english"] p').html('Αγγλικά'); $('.languageSelect[language="greek"] p').html('Ελληνικά'); $('.contentDiv').hide();//hide any other language $('.greekContentDiv').show();//show Greek content } }); }); 

 .blue{ background:#1ecae3; float:left; } .gray{ background:#eee; float:left; } .orange{ background:#fdcb05; float:left; } .languageSelect{ cursor: pointer; margin-right: 10px; padding: 5px; } .contentDiv{ display: none; } .clearfix{ clear: both; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gray languageSelect" language="english"> <p>English</p> </div> <div class="orange languageSelect" language="greek"> <p>Greek</p> </div> <div class="clearfix"></div> <div class="englishContentDiv contentDiv"> English text/elements here. </div> <div class="greekContentDiv contentDiv"> Greek text/elements here. </div>