时间戳

首页 > 解决方案 > 单击时未触发onclick

javascript - 单击时未触发onclick

问题描述

我面临一个简单的JS问题。我写了这段代码：

function dash1() {
  var self = this;
  document.getElementById("vizContainer").src = "https://xxx";
}
function dash2() {
  var self = this;
  document.getElementById("vizContainer").src = "https://yyy";
}
<div class="mf123_options d">
   <input onclick="dash1();" style="margin:0.5rem;" type="radio" id="first_dashboard" name="mf123_dashboards" value="first_dashboard" checked>
   <label for="first_dashboard">1st Dashboard</label>
</div>
<div class="mf123_options d">
   <input onclick="dash2();" style="margin:0.5rem;" type="radio" id="second_dashboard" name="mf123_dashboards" value="second_dashboard">
   <label for="second_dashboard">2nd Dashboard</label>
</div>
<iframe id="vizContainer" style="width: 100%; height: 100%;" src="/default.asp">
</iframe>

当我尝试单击更改 iframe 时，它​​不起作用。我尝试了很多没有结果的事情

标签： javascriptonclick

解决方案

Click事件仅在您单击单选按钮本身时才有效，而不是在您单击伴随的标签元素时。请改用change事件。

function dash1() {
  var self = this;
  document.getElementById("vizContainer").src = "https://placekitten.com/200/300";
}
function dash2() {
  var self = this;
  document.getElementById("vizContainer").src = "https://placekitten.com/g/200/300";
}
<div class="mf123_options d">
   <input onchange="dash1();" style="margin:0.5rem;" type="radio" id="first_dashboard" name="mf123_dashboards" value="first_dashboard" checked>
   <label for="first_dashboard">1st Dashboard</label>
</div>
<div class="mf123_options d">
   <input onchange="dash2();" style="margin:0.5rem;" type="radio" id="second_dashboard" name="mf123_dashboards" value="second_dashboard">
   <label for="second_dashboard">2nd Dashboard</label>
</div>
<iframe id="vizContainer" style="width: 100%; height: 100%;" src="/default.asp">
</iframe>

另外我建议不要on<event>在 HTML 代码中使用属性，而是使用addEventListener方法

function dash1() {
  document.getElementById("vizContainer").src = "https://placekitten.com/200/300";
}

function dash2() {
  document.getElementById("vizContainer").src = "https://placekitten.com/g/200/300";
}

document.getElementById('first_dashboard').addEventListener('change', dash1)
document.getElementById('second_dashboard').addEventListener('change', dash2)
.mf123_options [type=radio] {
  margin:0.5rem;
}
<div class="mf123_options d">
  <input type="radio" id="first_dashboard" name="mf123_dashboards" value="first_dashboard" checked>
  <label for="first_dashboard">1st Dashboard</label>
</div>
<div class="mf123_options d">
  <input type="radio" id="second_dashboard" name="mf123_dashboards" value="second_dashboard">
  <label for="second_dashboard">2nd Dashboard</label>
</div>
<iframe id="vizContainer" style="width: 100%; height: 100%;" src="/default.asp">
</iframe>

推荐阅读