Question

101

How to replace html button with plain text

rated 0 times [ 104] [ 3] / answers: 1 / hits: 6941 / 11 Years ago, fri, january 31, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lesterluiss

Add To Favorites

Follow

Total Points: 513

Total Questions: 104

Total Answers: 106

Location: Honduras

Member since Sat, Jul 24, 2021

3 Years ago

answered 11 Years ago ryderalfonsos · Accepted Answer

<!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.