Question on some JavaScript

Question

TObannion 0 Junior Poster in Training

8 Years Ago

I am trying to make a page that displays an image, and then utilizes a group of radio buttons and an apply button to perform effects on the image in the <div>tag . It is using the show(), hide(), Toggle(), Fade In(), Fade Out(), Fade To(), Slide Down(), Slide Up(), and Slide Toggle() methods.
Here is the "shell" that I have...just not sure where to go or what to do next.

<!doctype html>
<html>
  <meta charset = "utf-8">
  <title>Assignment 11</title>
  <head>
    <script type ="text/javascript" src = "jquery-1.4.4.min.js"></script>
    <script type = "text/javascript">
      function showDiv(divNum)
        {
          $("Show"+divNum).show();
        };
      function hideDiv(divNum)
        {
          $("Hide"+divNum).hide();
        };
      function toggleDiv(divNum)
        {
          $("Toggle"+divNum).toggle();
        };
      function fadeInDiv(divNum)
        {
          $("Fade In"+divNum).fadeIn();
        };
      function fadeOutDiv(divNum)
        {
          $("Fade Out"+divNum).fadeOut();
        };
      function fadeToDiv(divNum)
        {
          $("Fade To"+divNum).fadeTo();
        };
      function slideDownDiv(divNum)
        {
          $("Slide Down"+divNum).slideDown();
        };
      function slideUpDiv(divNum)
        {
          $("Slide Up"+divNum).slideUp();
        };
      function slideToggleDiv(divNum)
        {
          $("Slide Toggle"+divNum).slideToggle();
        };
      function apply()
        {

        };

    </script>
  </head>

  <body>
    <div id="#">
      <img src="linux.jpg" />

    </div>
    <input type = "radio" name = "choice" value = "showDiv()">Show<br/>
    <input type = "radio" name = "choice" value = "hideDiv()">Hide<br/>
    <input type = "radio" name = "choice" value = "toggleDiv()">Toggle<br/>
    <input type = "radio" name = "choice" value = "fadeInDiv()">Fade In<br/>
    <input type = "radio" name = "choice" value = "fadeOutDiv()">Fade Out<br/>
    <input type = "radio" name = "choice" value = "fadeToDiv()">Fade To<br/>
    <input type = "radio" name = "choice" value = "slideDownDiv()">Slide Down<br/>
    <input type = "radio" name = "choice" value = "slideUpDiv()">Slide Up<br/>
    <input type = "radio" name = "choice" value = "slideToggleDiv()">Slide Toggle<br/>
    <button onclick = "apply()">Apply</button><br/>

  </body>
</html>

Any direction on what to do next would be super helpful.

javascript jquery

2 Contributors
2 Replies
255 Views
19 Hours Discussion Span
Latest Post 8 Years Ago Latest Post by TObannion

hericles 289 Master Poster

8 Years Ago

Your code is a little confusing. Each of your javascript functions expects a parameter yet none of the onclick="" supply one. Ignoring the fact you never supply divNum, your jQuery selector won't work
$("Slide Toggle"+divNum)
Because "Slide Toggle" and all the rest of the terms you use aren't jQuery selectors (no # or . in front to specify ID or class) and the there is no element with that name on your page to be manipulated anyway.

I think you need to have one image on the page with a set ID and then each radio button's onclick calls the function that affects that image with the effect.
<img src='someUrl' id='someID' />

jQuery('#someID').show();
jQuery('#someID').toggle();
etc.

If this is actually n assignment I would suggest going over the jQuery section from your course material again. I don't think you have got a good grasp just yet.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

TObannion 0 Junior Poster in Training · Answer 1 · 2016-05-01T20:11:54+00:00

Okay so, I worked on it a little bit more. I have the radio buttons working, but how do I get them to only apply their effect when an "apply" button is clicked? The apply function is a skeleton and commented out in what I have below:

<!doctype html>
<html>
  <meta charset = "utf-8">
  <title>Assignment 11</title>
  <head>
    <script type ="text/javascript" src = "jquery-2.2.3.min.js"></script>
    <script type = "text/javascript">
      $(document).ready(function()
        {
          $("#show").click(function()
            {
              $(".myDiv").show();
            });
          $("#hide").click(function()
            {
              $(".myDiv").hide();
            });
          $("#toggle").click(function()
            {
              $(".myDiv").toggle();
            });
          $("#fadeIn").click(function()
            {
              $(".myDiv").fadeIn();
            });
          $("#fadeOut").click(function()
            {
              $(".myDiv").fadeOut();
            });
          $("#fadeTo").click(function()
            {
              $(".myDiv").fadeTo();
            });
          $("#slideDown").click(function()
            {
              $(".myDiv").slideDown();
            });
          $("#slideUp").click(function()
            {
              $(".myDiv").slideUp();
            });
          $("#slideToggle").click(function()
            {
              $(".myDiv").slideToggle();
            });
            });

     /* function apply()
        {
          //I know this function does nothing as of yet...just trying to figure out the rest first.
        };
      });*/

    </script>
  </head>

  <body>
    <div class ="myDiv">
      <img src='http://www.mistocks.com/images/LinuxIcon.png' id = 'picID' />

    </div>
    <input id = "show" type = "radio" value = "show" name = "selection"> Show<br/>
    <input id = "hide" type = "radio" value = "hide" name = "selection"> Hide<br/>
    <input id = "toggle" type = "radio"value = "toggle" name = "selection"> Toggle<br/>
    <input id = "fadeIn" type = "radio" value = "fadeIn" name = "selection"> Fade In<br/>
    <input id = "fadeOut" type = "radio" value = "fadeOut" name = "selection"> Fade Out<br/>
    <input id = "fadeTo" type = "radio" value = "fadeTo" name = "selection"> Fade To<br/>
    <input id = "slideDown" type = "radio" value = "slideDown" name = "selection"> Slide Down<br/>
    <input id = "slideUp" type = "radio" value = "slideUp" name = "selection"> Slide Up<br/>
    <input id = "slideToggle" type = "radio" value = "slideToggle" name = "selection"> Slide Toggle<br/>
    <button onclick = "apply()">Apply</button><br/>

  </body>
</html>

I substituted my local image source with the URL of the image to make it easier to look at.