Question

我正在尝试使用java脚本加载页面时使用特定图像文件的文件名更新名为id_0-instruction_task_one_image的隐藏输入字段的值并<img onload="

这是我用来更新隐藏字段的脚本：

<script type="text/javascript">
    function updateInput(ish) {  
    document.getElementById("id_0-instruction_task_one_image").value = ish;
    }  
</script>

这是图片的文件路径，请注意我还将文件名加载到value字段中：

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

当我加载页面时，图像将被显示，并且相同的文件名在值字段中，例如value="ITI1.jpg"

但隐藏的表单字段未正确更新，而是显示value="undefined"，如下所示

<input id="id_0-instruction_task_one_image" name="0-instruction_task_one_image" type="hidden" value="undefined"/>

有谁能告诉我我做错了什么？我一直在研究这个问题，我确信它应该有效。感谢

Answer 1

我认为您访问和设置html元素属性的方式存在问题。尝试对元素使用getAttribute和setAttribute，如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Set Attribute Value</title>
</head>
<body>

  <div class="image_rating">
    <img id="myImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/JosephBazalgettePortrait.jpg/100px-JosephBazalgettePortrait.jpg"
    value="myValue" onload="updateInput(this)" />
  </div>

  <input id="id_0-instruction_task_one_image" name="0-instruction_task_one_image" type="hidden"
  value="undefined" />

  <script type="text/javascript">
    function updateInput(ish) {
      var valueAttribute = ish.getAttribute("value");
      document.getElementById("id_0-instruction_task_one_image").setAttribute(
        "value", valueAttribute);
    }
  </script>

</body>
</html>

使用页面加载时图像的名称更新隐藏的输入字段

1 个答案: