CODEWITHSUNDEEP
javascriptonclick
Nick Zagkanas
Nick Zagkanas

Reputation: 89

onclick not triggered when clicked

I'm facing a simple JS problem. I have wrote this code:

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>

When I tried to clicked to change the iframe it doesn't work. I have tried many things without result

Upvotes: 0

Views: 691

Answers (2)

yunzen
yunzen

Reputation: 33439

Click event only works, if you click on the radio button itself, not if you click on the accompanied label element. Use the change event instead.

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>

Also I recommend not to use the on<event> attributes in your HTML code, but instead use the addEventListener method

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>

Upvotes: 1

KidCoder
KidCoder

Reputation: 164

try changing

<input onclick="dash1();"

to

<input onclick="dash1(this);"

And in your function try to take a parameter called self. Maybe that might help? Also In the html you call the function dash() when there is no function dash() on dash1() and dash2()

Upvotes: 0

Related Questions