java script-页面交互

一、js如何操作表单：

1）获取按钮：

    var anniu = document.getElementById("btn");

2）获取输入框：

    var abc = document.getElementById("txt");

3）元素被点击时要做什么事

    anniu.onclick = function(){

4）当用户点击时，打印输入框的内容

        console.log(abc.value);

    }

 <script>

二、js如何操作非表单控件：

         var data = [

            {

                id:446,

                img:"https://img12.360buyimg.com/n7/jfs/t1/85742/14/5474/48229/5dedee7bE17d4f7cc/6a9b4794f4da7e93.jpg",//鼠标指向图片，单击右键，选择“复制图片地址”

                name:"国行正品，急速发货，购机送无线充+壳膜+指环扣【新品上市苹果se】",//鼠标指向文字，右键选择检查，双击标签，再双击文字，Ctrl+c复制文字；

                price:4989.00,

            }

        ]//创建的数组必须在上面；

        var str="";

        for(var i = 0;i < data.length;i++){

             str += '<div class="list">'+ //标签到页面上会被解析；

                    '<img src="'+ data[i].img +'" alt="">'+

                    '<p>'+ data[i].name +'</p>'+

                    '<span>'+ data[i].price +'</span>'+

                    '<input type="button" value="加入购物车">'+

                '</div>';

        }

        var box = document.getElementById("box");//通过id来定位一个元素，

        box.innerHTML = str;//获取对象的内容或是向对象中插入内容；