没有引号，OnClick 函数自动调用

Question

我编写的脚本有一个按钮，单击该按钮时应显示年份和 IP 地址，但它会自动显示。我在另一个 3D 中看到，当您在 "onclick" 选项中放置一个类似

的函数时，就会出现此问题

<button name="bottone" onclick=myFunction()>AH-AH</button>

但这不是我的情况。

<button name="bottone" onclick=myFunction>AH-AH</button>

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

<script>
function myFunction(json) {
    var d = new Date();
    var n = d.getFullYear();
    var ip = json.ip;
    document.getElementById("demo").innerHTML = n + ' ' + ip;
}
</script>

<script type="application/javascript" src="http://jsonip.appspot.com/?callback=myFunction"></script>

似乎是第二个脚本 "overrides" onClick 选项。

Answer 1

将 onClick 更改为 onclick="myFunction()"，应该是这样（始终使用引号，这是一个函数调用，因此包括括号）。
第二个脚本直接调用您作为回调参数传递的函数 ?callback=myFunction，因此它将自动调用您的 myFunction() .

尝试直接在浏览器中打开 that script url 以查看脚本将执行的内容：

myFunction({"ip": "11.11.11.81", "address":"11.11.11.81"});

Answer 2

脚本会立即调用您的函数：

myFunction({"ip": "88.9.35.40", "address":"88.9.35.40"});

相反，您可以将数据存储在变量中，并在事件处理程序中使用该变量：

<button name="bottone">Display year and IP</button>
<p id="demo"></p>
<script>
(function() {
  var ipData;
  window.getIpData = function(data) { // We must use awful global for JSONP
    delete window.getIpData; // Get rid of the awful global
    ipData = data;
  };
  document.getElementsByName('bottone')[0].onclick = function() {
    if(ipData) {
      var year = new Date().getFullYear(),
          ip = ipData.ip;
      document.getElementById("demo").innerHTML = year + ' ' + ip;
    }
  }
})();
</script>
<script type="application/javascript" src="http://jsonip.appspot.com/?callback=getIpData"></script>

Answer 3

使用这段代码。您包含的脚本正在调用回调函数，并且在其中打印页面的日期和 Ip 加载。所以我一直在单独的函数中显示 ip 和日期代码。

用于显示日期和 Ip 的变量> 我将它们设为全局变量，因此这些变量可以在回调方法之外使用。

<button name="bottone" onclick="showIpNDate()">AH-AH</button>
    
    <p id="demo"></p>
    
    <script>
        var ip, n;
    
        function myFunction(json) {
            var d = new Date();
            n = d.getFullYear();
            ip = json.ip;
    
        }
    
        function showIpNDate() {
            document.getElementById("demo").innerHTML = n + ' ' + ip;
        }
    </script>
    
    <script type="application/javascript" src="http://jsonip.appspot.com/?callback=myFunction"></script>

没有引号，OnClick 函数自动调用

Without quotations, OnClick function is calling automatically

javascript

onclick