怎么在input标签输入东西,点击按钮显示在页面

http://loc.dingtalk.com/78fd628416239364d0cafb94c41dadf29a6e0f7b16dd7abbec4ab66cc95e8073QzpcVXNlcnNcSFBcQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDg5MzIzMDY3NF92MlxJbWFnZUZpbGVzXDE2MjU5MjMxNDYyMjFfQzE0RDA2MUExOEVDN0QzNjEwQkJCQ0VGMEVBQzREQUUuanBn?renderHeight=1920&renderOrientation=1&renderWidth=1440

这是个网页,上面有个input的标签,在标签里面可以输入东西,然后旁边有一个保存,然后你这个时候往那个input标签里面,比如说打ABC123,然后你点击那个保存按钮,它就会刷新这个页面变成ABC123,然后那个按钮变成了编辑,然后那个方框就没了,只出现刚刚输入的东西。只剩下那个ABC123就前面你输的那个数字,在那边还有个编写按钮,然后你再点编写按钮又返回到那个页面了。页面是刷新不是又写了一个html

源 码 帮助_**
附上自己写的html

Document
    <script type="text/javascript">
       document.getElementById("btn").onclick=function(){
           var txtx = document.getElementById("txt").value;
           if(txtx.trim() == ''){
               alert('你没有输入');
               return false;
           }
           var li = document.createElement("li");
           box.insertBefore(li, box.firstChild);
           li.innerHTML="<li>"+txtx+"<a href='#' id='a'> <a/>"+"</shd>";
           document.getElementById("txt").value='';
           document.getElementById("a").onclick = function(){
               box.removeChild(li);
           }
           txt.style.display="none";
       }
   </script>

网页打不开,不知道这个是不是你要的效果,和你的描述一样。有帮助请点个采纳【本回答右上角】,谢谢~

效果如下

img


<input type="text" id="txt" /><span id="spTxt" style="display:none"></span><input type="button" id="btn" value="保存" />
<script type="text/javascript">
    document.getElementById("btn").onclick = function () {
        var txtx = document.getElementById("txt").value;
        var spTxt = document.getElementById('spTxt');
        if (this.value == '保存') {
            if (txtx.trim() == '') {
                alert('你没有输入');
                return false;
            }
            spTxt.innerHTML = txtx;

            txt.style.display = "none";
            spTxt.style.display = '';
            this.value='编辑'
        }
        else {
            txt.value = spTxt.innerHTML;

            txt.style.display = "";
            spTxt.style.display = 'none'
            this.value = '保存'
        }
    }
</script>

你题目的解答代码如下:(如有帮助,望采纳!谢谢! 点击我这个回答右上方的【采纳】按钮)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
</head>
<body>
    <input type="text" id="txt" value="" />
    <span id="content" style="display: none;"></span>
    <input type="button" id="btn" value="保存" />
    <input type="button" id="btn2" value="编辑" style="display: none;"/>
    <script type="text/javascript">
       document.getElementById("btn").onclick=function(){
            var txt = document.getElementById("txt");
            var content = document.getElementById("content");
            if(txt.value.trim() == ''){
                alert('你没有输入');
                return false;
            }
            content.innerText = txt.value;
            txt.style.display="none";
            content.style.display="";
            document.getElementById("btn").style.display="none";
            document.getElementById("btn2").style.display="";
       }
       document.getElementById("btn2").onclick=function(){
            txt.style.display="";
            content.style.display="none";
            document.getElementById("btn").style.display="";
            document.getElementById("btn2").style.display="none";
       }
   </script>

</body>
</html>