单击时未触发onclick

Question

我遇到了一个简单的 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 时，它不起作用。我试了很多东西都没有结果

Answer 1

尝试改变

<input onclick="dash1();"

至

<input onclick="dash1(this);"

并在您的函数中尝试使用一个名为 self 的参数。也许这会有所帮助？同样在 html 中，当 dash1() 和 dash2()

上没有函数 dash() 时，您调用函数 dash()

Answer 2

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>

我还建议不要在 HTML 代码中使用 on<event> 属性，而是使用 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>

单击时未触发onclick

onclick not triggered when clicked

javascript

onclick