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

标签 javascript html input

我正在尝试更新名为 id_0-instruction_task_one_image 的隐藏输入字段的值使用 java 脚本加载页面时使用特定图像文件的文件名和 <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"/>

谁能告诉我我做错了什么?我已经为此工作了一段时间,我相信它应该有效。谢谢

最佳答案

我认为您访问和设置 html 元素属性的方式存在问题。尝试在元素上使用 getAttributesetAttribute,如下所示:

<!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>

关于javascript - 使用页面加载时图像的名称更新隐藏的输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31014741/

相关文章:

javascript - 如何获取输入文本字段中的选择框选项值

javascript - 使用 AWS Lambda 进行网页抓取

javascript - 如何使用 JavaScript 传输图像

javascript - Css 按钮宽度百分比?响应按钮问题

char 未在 while 循环中注册

javascript - 将文件动态分配给表单中的文件输入字段

javascript - 入侵的 body 抢夺者 : Backbone view fade in and scale out

javascript - browserify 'Error: Cannot find module' 试图修复 'Uncaught reference error: require is not defined'

html - Bootstrap 将图像与文本对齐

jquery - 在最初加载时隐藏 div 的层次结构