html自定义标签参数-JZTXT

html的input中使用onclick（）事件可以向js传递当前标签中的属性

利用input的name属性。制作一个JSON字符串既可以把想传递数据传递给js，js接受后对数据进行处理得到想要的数据。

也可以用html的data-* = “” 的方式向js传递参数

如下例子

品名<input type="text" name="proName" id = "proName" value=""/><br/>
数量<input type="text" name="proCount" /><br/>
单价<input type="text" name="proPrice" id = "proPrice"/><br/>
<p color='{"s1":"自定义1","s2":"自定义2"}'  data-p="bird" data-obj ='{"s1":"自定义1","s2":"自定义2"}' onclick="getP(this)"> 使用data-*这种方式也可以向js传递自定义参数</p>
<p id="selfP"></p>
<input name ='{"product":"{{$value.商品名称}}","price":"{{$value.销售金额}}","self":"自定义"}'type="button"   value="出库" id="{{$value._id}}" onclick="outProduct(this)"/> 
<script>
    function outProduct(data){
        console.log(data.color)
        let qq = data.name
        console.log(qq)
        qq = JSON.parse(qq)
      
        console.log(typeof(qq))
        console.log(qq.price)
        let outProName = document.getElementById('proName')
        let outProPrice = document.getElementById('proPrice')
        outProName.value = qq.self
        outProPrice.value = qq.price
       
        
    }
    function getP(data){
        console.log(data.getAttribute("data-p"))
        let pObj = data.getAttribute("data-obj")
        pObj = JSON.parse(pObj)
        console.log(pObj.s1)
        let selfP = document.getElementById('selfP')
        selfP.innerHTML = pObj.s1
    }
</script>