Question

我试图扩展你们帮助我的javascript。

The Snippet：

<script>
 function changeValue(o){
   document.getElementsByName('NAME')[0].value=o.innerHTML;
 }
</script>

<span onclick="changeValue(this)" style="cursor: pointer;">One</span>
<span onclick="changeValue(this)" style="cursor: pointer;">Two</span>
<img src='image.gif' onclick="changeValue(this.src)" />

<input type="text" name="NAME" value="SOMETHING">

跨度正常，但我实际上并不需要它们。一旦我搞清楚了，我将拥有所有图像。

我尝试了几种方法，但我能找到的与我的使用没有直接关系。

最终目标是使用js将img src放入文本输入中，最好是它已经存在的方式。我觉得它非常接近。

Answer 1

this.src将是图片对象的src属性。 o.innerHTML会尝试阅读不存在的innerHTML的{{1}}属性。

只使用传递的参数作为输入元素的值。

this.src

Fiddle here

修改：要获取document.getElementsByName('NAME')[0].value=o;属性的值而不是src属性，请使用src。 this.getAttribute('src')将返回元素的网址。

Answer 2

当你执行this.src时，它返回一个字符串而不是一个DOM元素。

只需传递您要显示的值

即可

<script>
 function changeValue(o){
   document.getElementsByName('NAME')[0].value=o;
 }
</script>

<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">One</span>
<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">Two</span>
<img src='image.gif' onclick="changeValue(this.src)" />

<input type="text" name="NAME" value="SOMETHING">

Answer 3

我尝试运行您的代码，请参阅下文。

我还使用了 document.querySelector（'＃testinput'）而不是 document.getElementsByName（'NAME'）[0]

<html>
<head>
    <script>
    function changeValue(val) {
        document.querySelector('#testinput').value = val;
    }
    </script>
</head>

<body>
    <span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">One</span>
    <span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">Two</span>
    <img src='image.gif' onclick="changeValue(this.src)" />
    <input type="text" id="testinput" name="NAME" value="SOMETHING">
</body>
</html>

将img src插入输入onClick

3 个答案: