Hide/show elements in javascript

Question

<tr>
<td>Name:</td>
<td><span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></td>  
</tr>

I have this, what kind of javascript do I need in order to hide the span and let the input show? This should be done by clicking this edit button:

<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-edit"></i></a>

I have checked other questions on this site for duplication, but I tried alot and none answered my question!

Answer 1

<html>
    <head>
        <script>
            function showMe(){
                document.querySelector('#change').style.display = ''; //Show the input
                document.querySelector('#keep').style.display = 'none' //Hide the span
            }
        </script>
    </head>

    <body>
        <tr>
            <td>Name:</td>
            <td>
                <span id = 'keep'>Username</span>
                <input id = 'change' value= 'Name' style= 'display:none;'>
            </td>  
        </tr>
        <a href = '#' data-original-title = 'Edit this user' data-toggle = 'tooltip' type = 'button' class='btn btn-sm btn-warning' onclick = 'showMe()'><i class = 'glyphicon glyphicon-edit'>click me</i></a>
    </body>
</html>

Answer 2

Use This Simple Code

first add library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

your html code

<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-edit"></i>edit</a>

<span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></span>

and use script

<script>
$(document).ready(function(){
    $("a").click(function(){
        $(" #change").toggle();
         $("#keep").hide();
    });
});
</script>

Hide/show elements in javascript

Question

2 answers

solution1
1 ACCPTED 2016-12-03 16:08:49

solution2
1 2016-12-03 16:24:12

Hide/show elements in javascript

Question

2 answers

solution1 1 ACCPTED 2016-12-03 16:08:49

solution2 1 2016-12-03 16:24:12

solution1
1 ACCPTED 2016-12-03 16:08:49

solution2
1 2016-12-03 16:24:12