creating basic button with javascript

Question

I am making a button that changes from "you" > "wow" > "travel" with every click.

but it makes an error saying "Uncaught TypeError: onoff is not a function at HTMLInputElement.onclick (7.html:15)"

Can you help me solve this problem?

function onoff() {
  currentvalue = document.getElementById('onoff').value;
  
  if (currentvalue == "you") {
    document.getElementById('onoff').value = "wow";
  } else if (currentvalue == "wow";) {
    document.getElementById('onoff').value = "travel";
  } else {
    document.getElementById('onoff').value = "you";
  }
}

<input type="button" value="you" id="onoff" onclick="onoff();">

.value doesn't capture the text element inside the button element. Use innerText instead. — Ronnie Smith
– Ronnie Smith, Commented Jan 13, 2019 at 2:11
@RonRoyston Better to use .textContent, only use .innerText if you really need it perfectionkills.com/the-poor-misunderstood-innerText (but in this case, .value is just fine) — CertainPerformance
– CertainPerformance, Commented Jan 13, 2019 at 4:25
@CertainPerformance oh i see he's nailed down a value attribute on a button element. But yes, .textContent (vs innerText) is good call. In any case, I'm not fan of using a value attribute on a button nor of programatically altering buttons as it violates the KISS principle. I'd just creates a button for each action and show/hide as needed. — Ronnie Smith
– Ronnie Smith, Commented Jan 13, 2019 at 4:34

Wicak · Accepted Answer · 2019-01-13 01:39:38Z

3

function onoff() {
  var currentvalue = document.getElementById('onoff').value;
  if (currentvalue == "you") {
    document.getElementById('onoff').value = "wow";
  } else if (currentvalue == "wow") {
    document.getElementById('onoff').value = "travel";
  } else {
    document.getElementById('onoff').value = "you";
  }
}

<input type="button" value="you" id="onoff" onclick="onoff()">

Done, all is work :

i have been replace onclick="onoff();" and else if (currentvalue == "wow";)

the problems was only in syntax typo

answered Jan 13, 2019 at 1:39

Wicak

4095 silver badges13 bronze badges

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

2 Comments

Wicak Over a year ago

Glad to hear if it helps you, please accept the answer

CertainPerformance Over a year ago

Typo questions should be flagged and closed, not answered

jcal · Accepted Answer · 2019-01-13 02:15:27Z

1

Your javascript function wasn't declared because it has a typo in it. Also I'd like to suggest to put the words you like to iterate through in an array, which makes the code easier to extend or modify. It also improves the readability.

var words = ["you", "wow", "travel"];
var button = document.getElementById('button');
var index = 0;

button.value = words[index++];

function onoff() {
  button.value = words[index++ % words.length];
}

<input type="button" id="button" onclick="onoff()" />

edited Jan 13, 2019 at 2:15

answered Jan 13, 2019 at 1:50

jcal

8755 silver badges14 bronze badges

Collectives™ on Stack Overflow

creating basic button with javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related