尝试使用在脚本中激活 try{} catch{} 的按钮时页面更新

Question

在原始脚本中，当文本栏中没有值并且我单击名为 Radar 2 的按钮时，页面会自动刷新，据我所知，因为它在函数，页面因此而刷新。

为了防止这个错误和这个强制更新，我尝试使用 try{} catch{}，所以如果在尝试解析第一个函数时出现错误，打开一个空白的 iframe。

但是当我点击 Radar 2 按钮时页面不断更新。

我想知道我做错了什么，以及满足我需要的正确脚本是什么样的。

原脚本运行方式如下：

<form action="" method="post" id="url-setter2">
<button type="submit" name="submit">Radar 2</button>
<input type="text" name="url2" id="url2" style="width: 282px;" />
<iframe id="the-frame2" width="347" height="282" src=""></iframe>
<script type="text/javascript">
    (function () {
        "use strict";
        var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
        url_setter.onsubmit = function (event) {
    let link = document.getElementById("url2").value;
    let value2 = link.split("OB_EV")[1];
    value2 = value2.split("/")[0];
            event.preventDefault();
            the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value2;
        };
    }());
</script>

我的脚本错误测试：

<script type="text/javascript">
    (function () {
        "use strict";
        var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
        url_setter.onsubmit = try {
    function (event) {
    let link = document.getElementById("url2").value;
    let value2 = link.split("OB_EV")[1];
    value2 = value2.split("/")[0];
            event.preventDefault();
            the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value2;
        }
    }
    catch (e) {
    function (event) {
                  event.preventDefault();
                  the_iframe.src ="";
              }
    };
    }());
</script>

Answer 1

使用 type="submit" 将尝试将表单数据发送到服务器进行处理，这就是页面刷新的原因。

改为尝试使用 <button onclick="myFunction()">Radar 2</button>，其中 myFunction() 是一个包含您的 javascript 代码的函数

尝试使用在脚本中激活 try{} catch{} 的按钮时页面更新

Page updating when trying to use a button that activates try{} catch{} in script

html

javascript

try-catch