How to change input type to just text in Javascript

Question

I made a button but when I press the button I want to change the button to just a text output. I don't want to change the text inside the button. I want to change the button itself into a text.

<input type="button" id="button1" value="See Answer" onclick="check1();">

this is my button.

<script type="text/javascript">
        function check1() {
          const answer = document.getElementById("question1").innerText;
          const mybutton = document.getElementById("button1");
          if(answer=="Seoul") mybutton.innerText = "CORRECT"
          else mybutton.innerText = "Seoul"
        }
      </script>

this is my unfinished version of changing the button into the text "CORRECT" if the answer is correct and changing the button into text "Seoul" if the answer is wrong.

If you simply replace innerText with value, it will works — Van Tho
– Van Tho, Commented Mar 21, 2020 at 10:10

Mamun · Accepted Answer · 2020-03-21 11:17:38Z

2

HTML <input> element does not have innerText property, use value instead. You also should remove the button and create a text node with the value using createTextNode(). Finally insert the created text element after the input element:

function check1() {
  const answer = document.getElementById("question1");
  const mybutton = document.getElementById("button1");
  mybutton.remove();
  var textNode;
  if(answer.value.trim() == "Seoul"){
    textNode = document.createTextNode("CORRECT");
  }
  else textNode = document.createTextNode("Seoul");
  //insert the text node after the answer element
  answer.parentNode.insertBefore(textNode, answer.nextSibling);
}

<input id="question1"/>
<input type="button" id="button1" value="See Answer" onclick="check1();">

edited Mar 21, 2020 at 11:17

answered Mar 21, 2020 at 10:09

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

2 Comments

AyushKatiyar Over a year ago

The question is not regarding changing the value of button but to change the button tag to text or div with the text as an answer

Mamun Over a year ago

@AyushKatiyar, you are right, updated the answer, +1 your answer:)

AyushKatiyar · Accepted Answer · 2020-03-21 10:20:15Z

1

Input type button and text does not have innerText, use value instead:

function check1() {
  const answer = document.getElementById("question1").innerText;
  const mybutton = document.getElementById("button1");
  if(answer=="Seoul") {
        mybutton.parentNode.removeChild(mybutton);
        var t = document.createTextNode("Correct");
        document.body.appendChild(t);}
  else {
        mybutton.parentNode.removeChild(mybutton);
        var t = document.createTextNode("Seoul");
        document.body.appendChild(t);
  }
}

<input type="button" id="button1" value="See Answer" onclick="check1();">

<input id="question1">

answered Mar 21, 2020 at 10:20

AyushKatiyar

1,0209 silver badges15 bronze badges

Comments

erzen · Accepted Answer · 2020-03-21 10:09:04Z

1

You can make one element with same text with buttons text, and firstly to hide this element. When you click on button show element and hide the button.

answered Mar 21, 2020 at 10:09

erzen

4311 gold badge6 silver badges21 bronze badges

Comments

Mr Khan · Accepted Answer · 2020-03-21 10:31:11Z

1

You can change the button field to text field by fetching the element by id and setattribute of type to text

document.getElementById("button1").setAttribute("type","text");

To disable the converted text field, you can do it this way.

document.getElementById("button1"). disabled = true;

The complete code:

<script type="text/javascript">
function check1() {
  //Fetch elements and answers
  const answer = document.getElementById("question1").innerText;
  const mybutton = document.getElementById("button1");

  //Change button to text field with changing its type attriube to text
  mybutton.setAttribute("type","text");

  //Disable the newly created text field
  mybutton.disabled = true;

  if(answer === "Seoul"){
    mybutton.value = "CORRECT";
  }else{
    mybutton.value = "Seoul";
  }
}
</script>

Lastly, use Triple equals (===) instead of Double equals (==) whenever doing comparison. Double equals (==) converts the variable values to the same type before performing comparison. While triple equals (===) does not do any type conversion (coercion) and returns true only if both values and types are identical

edited Mar 21, 2020 at 10:31

answered Mar 21, 2020 at 10:09

Mr Khan

2,3061 gold badge9 silver badges27 bronze badges

1 Comment

Alyssa Over a year ago

I tried this but this only changed the button into an input textbox that had the value "Seoul" in it. What should I do if I want to change the button into a text that is not editable?

Collectives™ on Stack Overflow

How to change input type to just text in Javascript

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related