How to replace html button with plain text

Question

How do you replace a button with whatever words were on the button before? I was looking at an answer to another similar question, which said to use something like:

var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);

but that had made what other buttons do change. Does anyone know another way to change a button to regular text?

I know that that code works just by itself, but it doesn't work with my code for some reason, so I don't really care what's wrong with that code. I'm just wondering if anyone knows another way to do it.

Thanks

Well, there are six buttons, and whenever I apply that to one of them, all of the buttons before it get disabled. I do disable and enable buttons in my code a lot, but it just randomly disables them — CPC
– CPC, Commented Jan 31, 2014 at 17:21
@user3130551: Well, something is wrong. But the code you posted is correct, so there is nothing we can do. — Felix Kling
– Felix Kling, Commented Jan 31, 2014 at 17:27

Alex · Accepted Answer · 2014-01-31 18:12:15Z

1

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <div id="myDiv">
        <input type="button" value="Change into Text" id="submit" onClick="change()"> <!--button input that will trigger an event named change-->
    </div>
</body>
</html>
<script type="text/javascript">

function change(){ //function to run when you click on the button...
    var buttonValue = document.getElementById("submit").value; //stores the button value
    document.getElementById("myDiv").innerHTML = buttonValue; // displays the value as a plain text inside "myDiv" - removing the button input entirely 
}

</script>

EDIT: I've just noticed you had multiple buttons in your page, which will make my previous example wrong. heres something that will make you work easier i think in case you will add extra buttons:

first heres the code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <ul>
        <li id="id_1"><input type="button" value="Change into Text" onClick="change(1)" id="button_1"></li>
        <li id="id_2"><input type="button" value="Change into Text" onClick="change(2)" id="button_2"></li>
        <li id="id_3"><input type="button" value="Change into Text" onClick="change(3)" id="button_3"></li>
    </ul>
</body>
</html>
<script type="text/javascript">
var id;
function change(id){
    var buttonValue = document.getElementById("button_"+id).value;
    document.getElementById("id_"+id).innerHTML = buttonValue;
}

</script>

In the HTML part, you can create a list (li) of buttons if that's your layout... each list will have its own id, in this case id_x that will be used later when you replace its content. each button calls a function change(id) while id is just a unique number for each button.

In the JS part, the change(id) gets the id of the button that was clicked, takes its value, and replaces the innerHTML (content) of the relative list items with a plain text.

Let me know if you still need any other help.

edited Jan 31, 2014 at 18:12

answered Jan 31, 2014 at 17:21

Alex

13210 bronze badges

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

9 Comments

Felix Kling Over a year ago

Code without an explanation is not an answer.

CPC Over a year ago

I have two questions:

CPC Over a year ago

1. Does it make a difference that I'm using the button tag, and not the input tag?

CPC Over a year ago

2. With my buttons, the value and id are different, so would I use the id or value in the first javascript line?

Alex Over a year ago

Just noticed you might need multiple buttons, heres a solution i made that might be simpler.

|

Tomatrox · Accepted Answer · 2014-01-31 18:30:04Z

Seems that you are looking for another way to replace the buttons with plain text, well I'll show you the jQuery way.

HTML

<div>
    <button id="btn1" class="change-button">A button with some text 1</button>
    <button id="btn2" class="change-button">A button with some text 2</button>
    <button id="btn3" class="change-button">A button with some text 3</button>
</div>

jQuery

// When we click a button with a "change-button" class
$(".change-button").on("click", function(event){
    // First we get the ID value of the clicked button
    // example: "btn2"
    var buttonId = $(this).attr('id');

    // Then we get the html value of the clicked button
    // example: "A button with some text 2"
    var buttonText = $(this).html();

    // We use the function replaceWith, to replace the button to a <span>
    // with the buttonText variable we have
    $('#' + buttonId).replaceWith("<span>" + buttonText + "</span>");
});

As you can see, it's a lot more cleaner with jQuery. You should try it!

Here is the fiddle so you can test it.

Alex · Accepted Answer · 2014-01-31 18:03:35Z

-1

<html>
<script>
function fun()
{
var a = document.getElementById("hello").value;

document.getElementById("ad").innerHTML = a;
}
 </script>
 <body>
<div id="ad">
    <input type="button" value="hello" id="hello" onClick="fun()">
</div>


</body>
</html>

sorry, edited the wrong post

edited Jan 31, 2014 at 18:03

Alex

13210 bronze badges

answered Jan 31, 2014 at 17:34

user2804021

1615 bronze badges

3 Comments

Felix Kling Over a year ago

Code without an explanation is not an answer.

user2804021 Over a year ago

The getElementById() method accesses the first element with the specified id.Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages. However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.

user2804021 Over a year ago

I hope you got the explanation. If not please tell the line which you are unable to understand.

Collectives™ on Stack Overflow

How to replace html button with plain text

3 Answers 3

9 Comments

HTML

jQuery

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

HTML

jQuery

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related