Inline Javascript to Unobtrusive JavaScript?

Question

How can I channge this inline javascript to Unobtrusive JavaScript?

<input type="button" value="Text1" onclick="this.value=this.value=='Text1'?'Text2':'Text1';">

Thank you!

Thank you for your answears, but it doesn't work. My codes are:

php

<input id=\"button1\" type=\"button\" value=\"Text1\">

js file

document.getElementById('button1').onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
}

or

document.getElementById('button1').addEventListener('click', function () {
    this.value = (this.value === 'Text1') ? 'Text2': 'Text1';
}, false);

I tried everything you told me, but it didn't work! Neither with jquery.

Have I forgotten something?

"this.value=this.value=='Text1'?'Text2':'Text1';" there was a missing " ' " — firemeaway
– firemeaway, Commented Sep 13, 2013 at 7:31
Works fine here: jsfiddle.net/j08691/zw2Fp. Where are you placing the code? — j08691
– j08691, Commented Sep 15, 2013 at 2:56

Emil A. · Accepted Answer · 2013-09-13 07:33:02Z

1

Add an id to the input and do this:

document.getElementById('somebutton').addEventListener('click', function () {
    this.value = (this.value === 'Text1') ? 'Text2': 'Text1';
}, false);

or with jQuery

$('#somebutton').on('click', function () {
    this.value = (this.value === 'Text1') ? 'Text2': 'Text1';
});

answered Sep 13, 2013 at 7:33

Emil A.

3,4455 gold badges31 silver badges47 bronze badges

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

Comments

Paul · Accepted Answer · 2013-09-13 07:39:03Z

1

<input type="button" value="Text1" />
<script>
  (function(){
    var inputs = document.getElementsByTagName('input');
    return inputs[inputs.length - 1];
  })() // returns the input element
  .onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
  }
</script>

This script has to be placed immediately after the element (or at least somewhere before the next input element on the page).

Demo

If you are okay with adding an id to your element that script becomes a bit simpler and you can put it anywhere after the input exists (such as right before your closing </body> tag:

<input id="somename" type="button" value="Text1" />

Script:

<script>
  document.getElementById('somename').onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
  }
</script>

Demo

edited Sep 13, 2013 at 7:39

answered Sep 13, 2013 at 7:33

Paul

142k28 gold badges285 silver badges272 bronze badges

3 Comments

Jayapal Chandran Over a year ago

i want to know the purpose of (function(){ in your reply cause i never use that. can't it be (inputs[inputs.length -1]).onclick ... ?

Paul Over a year ago

Yeah, that would work jist as well. As long as it's all inside the function so that the vraiable inputs doesn't become global

Jayapal Chandran Over a year ago

i see. by that way we can prevent the variable scope very local. ok.

Collectives™ on Stack Overflow

Inline Javascript to Unobtrusive JavaScript?

2 Answers 2

Comments

Demo

Demo

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related