隐藏/显示javascript中的元素

debugcn 发表于 Dev

过错

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

我有这个，我需要哪种JavaScript才能隐藏范围并让输入显示？这应该通过单击以下编辑按钮来完成：

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

我已经检查了本网站上的其他问题以进行重复，但是我尝试了很多，但都没有回答我的问题！

其他

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。