字符串拼接onclick函数

爱被打了一巴掌 2022-04-15 07:15 271阅读 0赞

直接贴代码吧

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>js字符串拼接onclick出现的问题</title>
    </head>
    
    <body>
        <div id="box"> 
        </div>
        <button onclick="show('a');show2('aa','bb')">一个onclik两个方法</button>
    </body>
    
    </html>
    
    <script>
        function show(v) {
            alert(v)
    
        }
    
        function show2(v1,v2) {
            alert(v1)
            alert(v2)
        }
        function show3(v) {
                alert(v.name)
        }
    
        var arr = [
            {
                name: 'wangwu',
                age: 23,
                hight: [180, 180, 180]
            },
    
            {
                name: 'zhangsan',
                age: 22,
                hight: [180, 160, 180]
            },
            {
                name: 'lisi',
                age: 21,
                hight: [180, 170, 180]
            }
        ]
    
        
       //传递一个参数
        // var ht = '<button onclick=show("' + arr[0].name + '")>我是按钮</button>'  
       //传递两个参数
        //ht = '<button onclick=show2("' + arr[1].name + '","' + arr[1].age + '")>我是按钮</button>'
        //传递json对象
        //ht = '<button onclick=show3(' + JSON.stringify(arr[2]) + ')>我是按钮</button>'
        //使用转义字符传递两个参数
        // ht= "<a href='#' onclick=\"show2('" + arr[2].name + "','" + arr[2].age + "')\">a标签</a>"
        //再使用转义字符
        // ht="<a href='#' onclick = 'show(\""+ arr[2].name +"\")'> 转义</a > "
    
       /*  
       部分字符转义如下：
    	    & 符号："&", "&"
            双引号："\"", """
            小于号："<", "<"
            大于号：">", ">"
            单引号："'", "'"
        */
        // 在使用转义
        ht="<a href='#' onclick='show("" + arr[2].name + "")';>转义2</a>"
    
        document.getElementById("box").innerHTML=ht
        // $('#box').append(ht)
    
    
    </script>