javascript - 单击按钮时，未达到预期结果
问题描述
当我点击按钮时：
<button class="button" style="width: 352px;" onclick="limpartexto1()">Limpar Texto 1</button>
用红色圈起来，理论上它应该清除文本栏中写的文本并按下雷达 1 按钮。但是，当我单击按钮时，什么也没有发生。
Google Chrome 在开发工具中显示的错误：
我需要一些帮助来弄清楚为什么会这样，我找不到错误。
<div class="column left">
<form action="" method="post" id="url-setter1">
<button class="button" id="botaoradar1" onclick="radarzinho1()">Radar 1</button>
<input type="text" name="url1" id="url1" style="width: 283px;" />
<iframe id="the-frame1" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho1() {
"use strict";
var url_setter = document.getElementById('url-setter1'), url = document.getElementById('url1'), the_iframe = document.getElementById('the-frame1');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url1").value;
let value1 = link.split("OB_EV")[1];
value1 = value1.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value1;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart1">
<input class="button" type="submit" value="Chart 1" />
<input type="text" id="ChartBar1" name="ChartBar1" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 1"/>
<p></p>
<form action="" method="post" id="ClearText1">
<button class="button" style="width: 352px;" onclick="limpartexto1()">Limpar Texto 1</button>
</form>
<script type="text/javascript">
function limpartexto1() {
var btn = document.getElementById('ClearText1');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar1').value="";
document.getElementById('url1').value="";
document.getElementById('botaoradar1').click();};
}
</script>
</div>
注意：我将保留完整的项目脚本，以便任何可以帮助我的人更容易：
<html>
<head>
<style>
{
box-sizing: border-box;
}
.column {
float: left;
width: 355;
}
.left {
}
.middle {
}
.middle2 {
}
.right {
}
.row:after {
content: "";
display: table;
clear: both;
}
.button {
background-color: #33ccff;
color: black;
font-weight: bold;
}
body {
overflow: hidden;
}
</style>
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
<script language="JavaScript">
let intervalID
window.addEventListener('DOMContentLoaded', () => {
intervalID = setInterval(refreshIt, 500); // refresh every 0.5 secs
})
function refreshIt() {
if (!document.images) return;
// if want to stop the interval from repeating
// if (!document.images) clearInterval(intervalID)
document.images['Chart 1'].src = ChartBar1.value;
document.images['Chart 2'].src = ChartBar2.value;
document.images['Chart 3'].src = ChartBar3.value;
document.images['Chart 4'].src = ChartBar4.value;
}
</script>
</head>
<body style="background-color:black;">
<div class="row">
<div class="column left">
<form action="" method="post" id="url-setter1">
<button class="button" id="botaoradar1" onclick="radarzinho1()">Radar 1</button>
<input type="text" name="url1" id="url1" style="width: 283px;" />
<iframe id="the-frame1" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho1() {
"use strict";
var url_setter = document.getElementById('url-setter1'), url = document.getElementById('url1'), the_iframe = document.getElementById('the-frame1');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url1").value;
let value1 = link.split("OB_EV")[1];
value1 = value1.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value1;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart1">
<input class="button" type="submit" value="Chart 1" />
<input type="text" id="ChartBar1" name="ChartBar1" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 1"/>
<p></p>
<form action="" method="post" id="ClearText1">
<button class="button" style="width: 352px;" onclick="limpartexto1()">Limpar Texto 1</button>
</form>
<script type="text/javascript">
function limpartexto1() {
var btn = document.getElementById('ClearText1');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar1').value="";
document.getElementById('url1').value="";
document.getElementById('botaoradar1').click();};
}
</script>
</div>
<div class="column middle">
<form action="" method="post" id="url-setter2">
<button class="button" id="botaoradar2" onclick="radarzinho2()">Radar 2</button>
<input type="text" name="url2" id="url2" style="width: 283px;" />
<iframe id="the-frame2" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho2() {
"use strict";
var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
url_setter.onsubmit = function (event) {
try {
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) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart2">
<input class="button" type="submit" value="Chart 2" />
<input type="text" id="ChartBar2" name="ChartBar2" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 2"/>
<p></p>
<form action="" method="post" id="ClearText2">
<button class="button" style="width: 352px;" onclick="limpartexto2()">Limpar Texto 2</button>
</form>
<script type="text/javascript">
function limpartexto2() {
var btn = document.getElementById('ClearText2');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar2').value="";
document.getElementById('url2').value="";
document.getElementById('botaoradar2').click();};
}
</script>
</div>
<div class="column middle2">
<form action="" method="post" id="url-setter3">
<button class="button" id="botaoradar3" onclick="radarzinho3()">Radar 3</button>
<input type="text" name="url3" id="url3" style="width: 283px;" />
<iframe id="the-frame3" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho3() {
"use strict";
var url_setter = document.getElementById('url-setter3'), url = document.getElementById('url3'), the_iframe = document.getElementById('the-frame3');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url3").value;
let value3 = link.split("OB_EV")[1];
value3 = value3.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value3;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart3">
<input class="button" type="submit" value="Chart 3" />
<input type="text" id="ChartBar3" name="ChartBar3" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 3"/>
<p></p>
<form action="" method="post" id="ClearText3">
<button class="button" style="width: 352px;" onclick="limpartexto3()">Limpar Texto 3</button>
</form>
<script type="text/javascript">
function limpartexto3() {
var btn = document.getElementById('ClearText3');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar3').value="";
document.getElementById('url3').value="";
document.getElementById('botaoradar3').click();};
}
</script>
</div>
<div class="column right">
<form action="" method="post" id="url-setter4">
<button class="button" id="botaoradar4" onclick="radarzinho4()">Radar 4</button>
<input type="text" name="url4" id="url4" style="width: 283px;" />
<iframe id="the-frame4" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho4() {
"use strict";
var url_setter = document.getElementById('url-setter4'), url = document.getElementById('url4'), the_iframe = document.getElementById('the-frame4');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url4").value;
let value4 = link.split("OB_EV")[1];
value4 = value4.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value4;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart4">
<input class="button" type="submit" value="Chart 4" />
<input type="text" id="ChartBar4" name="ChartBar4" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 4"/>
<p></p>
<form action="" method="post" id="ClearText4">
<button class="button" style="width: 352px;" onclick="limpartexto4()">Limpar Texto 4</button>
</form>
<script type="text/javascript">
function limpartexto4() {
var btn = document.getElementById('ClearText4');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar4').value="";
document.getElementById('url4').value="";
document.getElementById('botaoradar4').click();};
}
</script>
</div>
</div>
</body>
</html>
解决方案
尝试更改此功能代码：
function limpartexto3() {
document.getElementById('ChartBar3').value="";
document.getElementById('url3').value="";
document.getElementById('botaoradar3').click();};
}
而不是附加一个事件处理程序，您应该简单地在单击此按钮时调用您的操作。
另一项观察是使用 IIFE。这些函数是在单独的范围内创建的，您不能将它们用作事件处理程序。
用这个：
function radarzinho1() {
"use strict";
var url_setter = document.getElementById('url-setter1'), url = document.getElementById('url1'), the_iframe = document.getElementById('the-frame1');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url1").value;
let value1 = link.split("OB_EV")[1];
value1 = value1.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value1;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}
建议您从小处着手，然后添加这些复杂的功能。
推荐阅读
- c# - 您正在尝试使用“新”关键字创建 MonoBehaviour。这是不允许的。统一谷歌 AdMob
- laravel - 登录后不活动laravel
- java - 检测长文本中的多种语言
- multithreading - Unity async 真的异步工作吗？
- c++ - 关于c++中“getlline”函数的问题
- swift - 在 SwiftUI 的同一个视图中拥有标签栏和导航栏？
- rest - 无法通过 Keycloak Rest API 创建带密码的用户
- docker - 如何在没有 sudo 的情况下在 ubuntu 上运行 docker
- sql - SQL JOIN 与 2 列（可为空）引用相同的外键
- c# - DateTimePicker 的自定义背景色