-1

The JSFiddle I am working with: https://jsfiddle.net/mL0uLx81/1/

I've been trying to trigger a function called toggleCheckbox on the click of a button.

I've tried it by doing onclick="toggleCheckbox()" on the input tag, and I've tried by adding document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false); to the JS file. Neither of them have worked, and I am unsure why.

Sammy I.
  • 2,523
  • 4
  • 29
  • 49
  • Your code works for me on JSFiddle, just put an `alert()` in the function code and you'll see it. – Drown Jun 14 '16 at 16:39
  • 3
    You didn't include jQuery in your fiddle. Did you check the developer console for errors? And since you're using jQuery, `document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);` could be reduced to `$('#surveyButton').click('toggleCheckbox')` – j08691 Jun 14 '16 at 16:39
  • 1
    Can you post your complete code so we can help you. – LifeOfPi Jun 14 '16 at 16:41
  • In your JSFiddle you are using jquery without including it Check [this post](http://stackoverflow.com/questions/30932542/how-to-enable-jquery-ui-in-jsfiddle) – M.M Jun 14 '16 at 16:42
  • 2
    Also `toggleCheckbox()` is wrapped in onload handler function, it's not defined in the global scope, hence the inline listener won't find the function. – Teemu Jun 14 '16 at 16:42

4 Answers4

3

You're pretty close, just a couple of fixes.

First, you're not including jQuery in your JS fiddle. Secondly, your toggleCheckbox function is not in the global scope, so it can't be accessed inline. Lastly, you'd need to update your appear/disappear functions. It seemed like they weren't toggling both the checkbox and the button in the same way.

Updated Code

HTML

<input type="checkbox" name="toggle" id="toggle" />
<input type="button" value="Open" id="surveyButton" /> <!--removed inline JS-->

JavaScript

function toggleCheckbox() { //moved function to global scope, if you wanted to add the listner inline you'd do it this way.

  if($("#toggle").is(':checked')) {
    SurveyAppear();
  }  else {
    SurveyDisappear();
  }
}

var SurveyAppear = function() {
  $("#surveyButton").prop('value', 'Open'); //switched from Close
  $("#toggle").prop('checked', false); //changed to false
}

var SurveyDisappear = function() {
  $("#surveyButton").prop('value', 'Close'); //switched from Open
  $("#toggle").prop('checked', true);
}

document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);

See it working in the updated fiddle. https://jsfiddle.net/igor_9000/mL0uLx81/2/

Hope that helps!

Community
  • 1
  • 1
Adam Konieska
  • 2,805
  • 3
  • 14
  • 27
1

Please find below plunker link https://plnkr.co/edit/vYvi4F45s6PpKrRvwqsA?p=preview

There might be spelling mistakes

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <input onclick="sampleFun()" type="button" value="button"/>
  </body>
</html>

// Code goes here
function sampleFun() {
  alert('hello');
}
Shivani
  • 347
  • 2
  • 6
0

In your JSFiddle you are using jquery without including it in the fiddle itself. An alert(); would work but nothing with $

There were other mistakes corrected below like @AdamKonieska noted

Check this postinstructions

Your NEW HTML (removed onclick):

<input type="button" value="Open" id="surveyButton" />

Your NEW JS (changed true for false in $("#toggle").prop('checked', false);):

var toggleCheckbox = function() {

  if ($("#toggle").is(':checked')) {
    SurveyDisappear();
  } else {
    SurveyAppear();
  }
}

var SurveyAppear = function() {
  $("#surveyButton").prop('value', 'Close');
  $("#toggle").prop('checked', true);
}

var SurveyDisappear = function() {
  $("#surveyButton").prop('value', 'Open');
  $("#toggle").prop('checked', false);
}

document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);
Community
  • 1
  • 1
M.M
  • 2,254
  • 1
  • 20
  • 33
0

If you're using jQuery, you can select the input tag that specifies the button, and attach a .click() listener to it, like this:

$('[type=submit]').click(function() {
     toggleCheckbox();
});

Otherwise, I think you have done the right thing. Hope my above solution helps!

Obinna Nwakwue
  • 210
  • 4
  • 16