用于更新多个隐藏字段的 JavaScript 函数，具体取决于它们是否存在答案

【问题标题】：A JavaScript function to update multiple hidden fields depending if they exist or not用于更新多个隐藏字段的 JavaScript 函数，具体取决于它们是否存在
【发布时间】：2015-09-14 13:47:43
【问题描述】：

我有一个 JavaScript 函数，我用它来更新隐藏的字段，其中包含向用户显示的图像的文件名。这适用于具有单个图像和单个隐藏字段的页面。我正在尝试对其进行自定义，以便可以在单个页面上使用它来更新多个隐藏字段，具体取决于它们是否存在。

Previously I tried to call separate functions 来自我的onload，用分号隔开。它适用于第一页/隐藏字段，但当第一个隐藏字段在第二页上不可用时，它会一直出错。

在此尝试中，我尝试将单个函数与链接到隐藏字段的 id 的 if 语句一起使用，但不幸的是，我似乎无法让它在任何页面/隐藏字段上工作

谁能告诉我哪里出错了？我相信有可能做到这一点，但我没有得到任何结果。谢谢

电流输出

<input id="id_9-slider_one_image" name="9-slider_one_image" type="hidden" />
<input id="id_10-slider_two_image" name="10-slider_two_image" type="hidden" />
<input id="id_11-slider_three_image" name="11-slider_three_image" type="hidden" />

期望的输出

<input id="id_9-slider_one_image" name="9-slider_one_image" type="hidden" value="P1DP.jpg"/>
<input id="id_10-slider_two_image" name="10-slider_two_image" type="hidden" value="P6D6.jpg"/>
<input id="id_11-slider_three_image" name="11-slider_three_image" type="hidden" value="P3D3.jpg"/>

我的代码

<div class="image_rating">      
    <img src="{% static "survey/images/pathone/" %}{{display_image}}" value="{{display_image}}" onload="updateInput(this)"/>                                                                                   
</div>  



<script type="text/javascript">
    function updateInput(ish) {
    var valueAttribute = ish.getAttribute("value");


    if($(this).attr("id") == "id_9-slider_one_image")
        document.getElementById("id_9-slider_one_image").setAttribute(
        "value", valueAttribute);

    if($(this).attr("id") == "id_10-slider_two_image")
        document.getElementById("id_10-slider_two_image").setAttribute(
        "value", valueAttribute);


    if($(this).attr("id") == "id_11-slider_three_image")
        document.getElementById("id_11-slider_three_image").setAttribute(
        "value", valueAttribute);
    }

</script>

【问题讨论】：

最快的方法是使用 try catch 来执行你的操作...
查看图像 src 和 value 属性后。它看起来 {{display_image}} 带有图像扩展名，当您进行比较时，您不会在 if 条件下计算它
不清楚 $(this) 在您的函数中指的是什么。您的图像元素和隐藏字段之间似乎缺少链接。这些隐藏字段是什么时候创建的？

标签： javascript html forms

【解决方案1】：

感谢这个问题和the highest voted answer，我能够在尝试设置值之前检查页面中是否存在 id

{% if wizard.steps.current in steps %}              


<div class="image_rating">      
    <img src="{% static "survey/images/pathone/" %}{{display_image}}" value="{{display_image}}" onload="updateInput(this)"/>                                                                                    
</div>  


<script type="text/javascript">
    function updateInput(ish) {
    var valueAttribute = ish.getAttribute("value");

    if (document.getElementById('id_9-slider_one_image')) {
        document.getElementById("id_9-slider_one_image").setAttribute(
        "value", valueAttribute)
    }

    if (document.getElementById('id_10-slider_two_image')) {
        document.getElementById("id_10-slider_two_image").setAttribute(
        "value", valueAttribute)
    }

    if (document.getElementById('id_11-slider_three_image')) {
        document.getElementById("id_11-slider_three_image").setAttribute(
        "value", valueAttribute)
    }

</script>

【讨论】：