javascript - Changing text by clicking an image

Question

I am a javascript noob.

I want clicking on the images to change the text in a span

What I have so far:

Image:

    <img src="image.png" onclick="document.span[0].elements['videoTitle'].value = 'My Text'" />

Span:

    <span name="videoTitle"><strong>My Initial Text</strong></span>

I dont know what should follow "document." and I assume i need javascript in the header or something?

I was referencing this post: click on image and change a text

I have no idea what I'm doing here. I don't understand js, I'm a designer!

Answer 1

Span 没有值属性。在这种情况下，您需要使用 innerHTML，如下所示：

<img src="image.png" onclick="document.getElementsByName('videoTitle')[0].getElementsByTagName('strong')[0].innerHTML = 'My Text'" />

这将更改页面上名为 videoTitle 的第一个元素的文本。

小提琴：http: //jsfiddle.net/duffmaster33/7j59H/

Answer 2

我想你正在寻找这个： -

 document.getElementsByName('videoTitle')[0] // assuming this is the first element with  
                                             //the name `videoTitle`
.getElementsByTagName('strong')[0]
 .innerHTML = 'My Text'

所以它将是

<span name="videoTitle"><strong>My Initial Text</strong></span>
<img src="image.png" onclick="document.getElementsByName('videoTitle')[0].getElementsByTagName('strong')[0].innerHTML = 'My Text'" />
This is native old way and is supported in all browsers.

演示

Answer 3

我建议做这样的事情：

<img src="image.png" onclick="document.getElementsByName('videoTitle')[0].getElementsByTagName('strong')[0].innerHtml= 'My Text'" />

或者

<img src="image.png" onclick="myFunc()" />
<script>
function myFunc(){
document.getElementsByName('videoTitle')[0].getElementsByTagName('strong')[0].innerHtml="my text";
}
</script>

我还建议给跨度一个 id 并按 ID 选择它