的onclick功能img标签不工作

Question

的onclick功能无法在这种情况下工作：

HTML

<img src="http://www.simplypo.ayz.pl/wp-content/uploads/2017/07/krakow- 
3.png" id="gabi" style="text-align: justify;" onClick="myFunction()" /> 

<p id="demo">Hi!</p> 

JS

function myFunction() { 
var str = document.getElementById("demo").innerHTML; 
var res = str.replace("Hi", "Hello"); 
document.getElementById("demo").innerHTML = res; 
} 

https://jsfiddle.net/kkdrrmhd/2/

Answer 1

试试这个

<img src="http://www.simplypo.ayz.pl/wp-content/uploads/2017/07/krakow-3.png" id="gabi" style="text-align: justify;" onClick="myFunction('<h2>Gabriela</h2> tomatoes.121')" /> 
<div id="text-display">dsadasd 
</div> 
<p id="demo">Visit Microsoft!</p> 

<script> 
function myFunction(sample) { 
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace("Microsoft", "W3Schools"); 
    document.getElementById("demo").innerHTML = res; 
} 
</script> 

Fiddle here

Answer 2

这是因为你的代码中缺省的jsfiddle包裹在window.onload功能。要改变这种状况，点击JavaScript设置图标，将其更改为“无包装”的一个选项

Answer 3

我建议使用addEventListener而非内联事件监听器：

function replaceContents() { 
 
    var str = document.getElementById("demo").innerHTML; 
 
    var res = str.replace("Hi", "Hello"); 
 
    document.getElementById("demo").innerHTML = res; 
 
} 
 

 
document.getElementById('gabi').addEventListener('click', replaceContents);

<img src="http://www.simplypo.ayz.pl/wp-content/uploads/2017/07/krakow-3.png" id="gabi" style="text-align: justify;" /> 
 

 
<p id="demo">Hi!</p>