Question

我有一个图像矩阵。每个图像当前用特定信息填充特定字段。下面一张图片的代码。

 <a href="#riskrating1" data-toggle="tab"><img src="components/com_safety101/images/a2.jpg" width="72" height="32" border="0" onclick="document.getElementById('jform_pre_control_risk').value = '10: Undesirable'; " /></a>

是否有一种方法可以让每个图像填充三个具有不同信息的字段？不确定是否可以堆叠document.get ElementById调用？

Answer 1

onclick属性中的语句可以包含任意数量的JavaScript语句 如果你愿意，你可以在里面写一个完整的程序 - 只是它看起来很糟糕。

建议将onclick所要达到的内容放在一个单独的函数中：

<a href="#riskrating1" data-toggle="tab">
    <img src="components/com_safety101/images/a2.jpg"
         width="72" height="32" border="0"
         onclick="handleOnClickFor(this)" />
</a>

并添加JavaScript函数：

<script type="text/javascript">
    function handleOnClickFor (element){
        // 'element' would be the DOM Object for the <img> tag,
        // differentiate different images with arguments like this
        // Note that the arguments can be a string, number, object ...
        document.getElementById('jform_pre_control_risk').value = '10: Undesirable'; 
}
</script>

Answer 2

您可以将代码解压缩到javascript函数：

<a href="#riskrating1" data-toggle="tab">
    <img 
        src="components/com_safety101/images/a2.jpg" 
        width="72" height="32" border="0" 
        onclick="populateFields()" />
</a>

<script type="text/javascript">
     function populateFields() {
         document.getElementById('jform_pre_control_risk').value = '10: Undesirable';
         // Populate other fields here
         document.getElementById('other_id').value = 'some other value';
     }
</script>

有没有办法使用onclick方法填充多个字段

2 个答案: