How to change a text based onclick with JavaScript?

Question

Good evening everybody!

Well, I am studying JavaScript at the moment, and I reachead the point in where I need, based on clicked text (button, ... it doesn't matter, I guess).

For example:

This message should be edited.

Two choices: ES - EN

If choice "ES" is clicked/selected, then:

This message has been edited to ES.

Otherwise, if choice "EN" is clicked/selected, then:

This message has been edited to EN.

I think this could have been achieved with an if in a script, but the problem is how to tell the script which option has been chosen, if "ES" or "EN".

I have this:

<p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func();">ES</a> - <a href="#" id="EN" onclick="func();">EN</a> - <a href="#" id="JP" onclick="func();">JP</a>

And as I said, the problem is that I don't know how to tell the script what has been clicked/selected.

Thank you for any help you may give me (if possible, an explanation with or over a solution would be amazing because I want to learn and understand, not to solve this problem without being able to solve the same thing or similar in a future).

Jaydeep Mor · Accepted Answer · 2017-07-07 12:22:43Z

4

Pass this to you function for get clicked element.

Then set it's id to you p tag using innerHTML.

See e.g.

function func(ele){
    var demo = document.getElementById('demo');
    demo.innerHTML = "This message should be edited to "+ele.id+".";
}

<p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func(this);">ES</a> - <a href="#" id="EN" onclick="func(this);">EN</a> - <a href="#" id="JP" onclick="func(this);">JP</a>

answered Jul 7, 2017 at 12:22

Jaydeep Mor

1,7233 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hassan Imam · Accepted Answer · 2017-07-07 12:32:12Z

2

Pass this in your func(), this will allow you to access the current clicked element.

var text = "This message should be edited to ";
function func(ele){
  console.log(ele.innerHTML);
  document.getElementById('demo').innerText = text + ele.innerText + ".";
}

<p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func(this);">ES</a> - <a href="#" id="EN" onclick="func(this);">EN</a> - <a href="#" id="JP" onclick="func(this);">JP</a>

edited Jul 7, 2017 at 12:32

answered Jul 7, 2017 at 12:21

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

1 Comment

Javier Green Over a year ago

This could work if the intention was just to change a number of parts, but, if in my case (that I didn't specify, sorry about that!), I want to use it as a multilingual script. For example, change the full language of an html from EN to ES. Thank you anyways!

Jovani Martinez · Accepted Answer · 2017-07-07 12:27:23Z

1

You can pass a argument to the function for example

function fun(lang){
    If(lang === "ES"){
        Do something 
    }else If(lang === "EN"){
        Do something 
    }
}

And when you call your function put something like this:

onClick="fun('ES')" or onClick="fun('EN')

NOTE: instead of If 's you could use switch statement inside your function fun(lang)

answered Jul 7, 2017 at 12:27

Jovani Martinez

796 bronze badges

1 Comment

Javier Green Over a year ago

This really did the trick and was what I was looking for. I was looking to pass an argument so the if could have a correct comparison. The problem was that how'd I pass an argument, and the answer was with "fun('ES')", which 'ES' was my mistake because I didn't put it there. So bad from me! Thank you very much.

Durga · Accepted Answer · 2017-07-07 12:33:18Z

1

var text = 'This message has been edited to ';

function func(e){
 document.getElementById('demo').innerHTML = text+e.id+'.'; 
}

<p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func(this);">ES</a> - <a href="#" id="EN" onclick="func(this);">EN</a> - <a href="#" id="JP" onclick="func(this);">JP</a>

you can pass this which works as an clicked event, from there get value and add to your result

edited Jul 7, 2017 at 12:33

answered Jul 7, 2017 at 12:27

Durga

15.6k2 gold badges31 silver badges55 bronze badges

1 Comment

Javier Green Over a year ago

Thank you but what Jiovani said was what I was looking for. This could work, anyways!

user8108476 · Accepted Answer · 2017-07-07 12:33:53Z

0

// Using JavaScript

// Firstly we get the demo element
var demo = document.getElementById("demo");

// When an element on the document si clicked
document.onclick = function(event) 

// if the target element has an id of "ES" change demo content to spanish
    if (event.target.id == "ES") {
    demo.innerHTML = "Spanish or EspagnolText";

  } else if (event.target.id == "EN") {

// else if element has an id of "EN" change demo content to english
    demo.innerHTML = "English Text";
  }
}

answered Jul 7, 2017 at 12:33

user8108476

1 Comment

Javier Green Over a year ago

This could also work, but I think it's easier to do the way Jovani explained. Thank you anyways!

Satinder singh · Accepted Answer · 2017-07-07 12:44:47Z

Another way using Switch Case.

HTML:

<p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func(this.id);">ES</a> - <a href="#" id="EN" onclick="func(this.id);">EN</a> - <a href="#" id="JP" onclick="func(this);">JP</a>

JavaScript:

var text = 'This message has been edited to ';

function func(value) {
  var selectValue="";

    switch (value) {
      case "EN":
          selectValue = "EN";
        break;

        case "ES":
            selectValue = "ES";
        break;

        case "JP":
            selectValue = "JP";
        break;
}

document.getElementById('demo').innerHTML = text + selectValue + '.';
}

Note: Anchor Tag tag defines a hyperlink, which is used to link from one page to another.

Collectives™ on Stack Overflow

How to change a text based onclick with JavaScript?

6 Answers 6

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related