首页 > Javascript中获取到某个内容后如何才能将这个内容赋值给一个文本域呀

Javascript中获取到某个内容后如何才能将这个内容赋值给一个文本域呀

我是需要先点击第一个按钮获取www.baidu.com这个网址;然后将这个网址放在valu_1这个文本域里面显示出来;

如下是我想到的,但是点击后没反应;求大神指教;哪里写错了。应该怎么改;谢谢大神们哈;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script>
            function xul(){
                var box_li1 = document.getElementById("xul_li1").innerHTML;
                var box_value1 = document.getElementById("valu_1").value;
                box_li1.innerHTML = box_value1.value;

            };
        </script>
    </head>
    <body>
        <input value="点击后这里获取内容" id="valu_1"/>
        <input type="button" value="获取LI1的内容" onclick="xul()"/>
        <input type="button" value="获取li2的内容" />
      <ul id="xul_1">
        <li id="xul_li1">http://www.baidu.com</li>
        <li id="xul_li2"><a href="http://www.163.com">这个是163网页</a></li>
      </ul>
    </body>
</html>

下面的算是同一个问题的延伸:
我想要的效果是,当我点击按钮二获取“163网页”这个值后,并交这个值赋给 文本域;但是在赋值的过程中会弹出一个prompt对话框;在对话框加输入内容,点击确定后;对话框中的内容会替代“163网页”这个值赋给文本域;
box_shuru = box_value2.value; 这是我想到的写法,但实行了没效果;
我又不想再将获值“163网页”再赋值的过程再走一次;要怎么写呀?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script>
            function xul(){
                var box_li1 = document.getElementById("xul_li1").innerHTML;
                var box_value1 = document.getElementById("valu_1").value=box_li1;
                alert(box_value1);
            };
            //第二个按钮点击后实行的代码
            function xul2(){
                var box_li2 = document.getElementById("xul_li2").innerHTML;
                var box_value2= document.getElementById("valu_1").value=box_li2;
                var box_xiaoxi = confirm("是否将要修改获取的值");
                    if(box_xiaoxi == true){
                        var box_shuru = prompt("要将获取的内容替换为?","请在这里输入要替换的内容")
                            if(box_shuru != null){
                                box_shuru = box_value2.value;
                            }
                            else{
                                alert("你选择了不替换内容");
                            }
                    }
            };
        </script>
    </head>
    <body>
        <input value="点击后这里获取内容" id="valu_1"/>
        <input type="button" value="获取LI1的内容" onclick="xul()"/>
        <input type="button" value="获取li2的内容" onclick="xul2()"/>
      <ul id="xul_1">
        <li id="xul_li1">http://www.baidu.com</li>
        <li id="xul_li2"><a href="http://www.163.com">这个是163网页</a></li>
      </ul>
    </body>
</html>


两个问题:

  1. 你的js代码在加载页面前执行了,也就是说,方法没有附加在目标上,应该移到body最后再去加载js代码:

    <body>
    <input value="点击后这里获取内容" id="valu_1"/>
    <input type="button" value="获取LI1的内容" onclick="xul()"/>
    <input type="button" value="获取li2的内容" />
      <ul id="xul_1">
    <li id="xul_li1">http://www.baidu.com</li>
    <li id="xul_li2"><a href="http://www.163.com">这个是163网页</a>    </li>
      </ul>
      <script>
        function xul(){
        var box_li1 =    
        document.getElementById("xul_li1").innerHTML;
        alert(box_li1);
        document.getElementById("valu_1").value = box_li1;       
        };
      </script>
    

2.document.getElementById("xul_li1").innerHTML和document.getElementById("valu_1").value就已经获取值了,不用再去.value或.innerHTML了

将函数包裹在立即执行中

<body>
    <input value="点击后这里获取内容" id="valu_1"/>
    <input type="button" value="获取LI1的内容" />
    <input type="button" value="获取li2的内容" />
  <ul id="xul_1">
    <li id="xul_li1">http://www.baidu.com</li>
    <li id="xul_li2"><a href="http://www.163.com">这个是163网页</a></li>
  </ul>
  <script>
      (function(window){
      document
        .getElementById("valu_1")
            .value = document.getElementById("xul_li1").innerHTML;

      })(window);
    </script>
</body>

这个称为立即执行的函数表达式

<body>
    <input value="点击后这里获取内容" id="valu_1"/>
    <input type="button" value="获取LI1的内容" />
    <input type="button" id='btn2' value="获取li2的内容" onclick="foo()" />
  <ul id="xul_1">
    <li id="xul_li1">http://www.baidu.com</li>
    <li id="xul_li2"><a id="target" href="http://www.163.com">这个是163网页</a></li>
  </ul>
  <script>
    function foo(){
        var text = document
            .getElementById('target')
                .innerHTML;

        document
            .getElementById('valu_1')
                .value = prompt('check your input',text);
    }
    </script>
</body>
【热门文章】
【热门文章】