Hello There, Guest!
View New Posts  |  View Today's Posts
Javascript problem

  • 0 Vote(s) - 0 Average


03-01-2014, 08:08 AM #1
william7
Member
**
Posts: 205 Threads:49 Joined: Feb 2012 Reputation: 0

Javascript problem
I'm in a beginners website coding class and became curious how javascript works. I watched this You Tube video below and decided to try it in html, but it didn't work. Can anyone tell me what went wrong?





Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>Simple Slideshow</title>

<meta charset="utf-8">


</head>



<body>

   <script type="text/javascript">

      var Image = new Array("BellamyCreek.jpg", "braininterface.jpg", "iwatch.jpg");
      var Image_Number = 0;
      var Image_Length = Image.length -1;

      function change_image(num) {

          Image_Number = Image_Number + num;

        if (Image_Number > Image_Length){

            Image_Number = 0;    

         }

         if (Image_Number < 0){
             Image_Number = Image_Length;

         }
        
         document.slideshow.src= Image[Image_Number];

           return false;

       }    


   </script>

   <img scr="BellamyCreek.jpg" name="slideshow" />

   <table>
      <tr>
          <td align="left"><a href="javascript.html" onclick=return change_image(-1)">Previous</a></td>
          <td align="right"><a href="javascript:change_image(1)">Next</a></td>
       <tr>
   <table>

   <div id="description">
      

   </div>




</body>


</html>

03-01-2014, 01:41 PM #2
AceInfinity
Developer
*******
Administrators
Posts: 9,733 Threads:1,026 Joined: Jun 2011 Reputation: 76

RE: Javascript problem
I'm on my phone, but you have this wrong...
Code:
<img scr="BellamyCreek.jpg" name="slideshow" />

You have the attrib named "scr" and not "src". There are better ways to do this though.
This post was last modified: 03-01-2014, 01:44 PM by AceInfinity.


Microsoft MVP .NET Programming - (2012 - Present)
®Crestron DMC-T Certified Automation Programmer

Development Site: aceinfinity.net

 ▲
 ▲ ▲

03-01-2014, 04:28 PM #3
AceInfinity
Developer
*******
Administrators
Posts: 9,733 Threads:1,026 Joined: Jun 2011 Reputation: 76

RE: Javascript problem
Okay, I don't know why you're doing this though:
Code:
onclick=return change_image(-1)"

You've got a misc double quote in there and you don't use the return keyword here. You're also mixing href and javascript events.

Try this:
Code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simple Slideshow</title>
    <meta charset='UTF-8'>
  </head>
  <body>

    <script type='text/javascript'>
      var _img_arr = new Array(
          '001.png',
          '002.png',
          '003.png'
        );
      var _img_index = 0;
      function prev_image() {
          _img_index = _img_index - 1 < 0 ? _img_arr.length - 1 : _img_index - 1;
          document.slideshow.src= _img_arr[_img_index];
          document.getElementById('description').innerHTML = _img_arr[_img_index];
      }
      function next_image() {
          _img_index = (_img_index + 1) % _img_arr.length;
          document.slideshow.src= _img_arr[_img_index];
          document.getElementById('description').innerHTML = _img_arr[_img_index];
      }
      function choose_image(index) {
          _img_index = index >= _img_arr.length ? index % _img_arr.length : index;
          document.slideshow.src= _img_arr[_img_index];
          document.getElementById('description').innerHTML = _img_arr[_img_index];
      }
    </script>

    <table>
      <tr>
          <td align='left'><a href='#' onclick='prev_image()'>Previous</a></td>
          <td align='right'><a href='#' onclick='next_image()'>Next</a></td>
        <tr>
    <table>
    <div id='description'>001.png</div>
    <div class='image-container'>
      <img src='001.png' name='slideshow' />
    </div>
  </body>
</html>

NOTE: The way it is being done in that video is nothing much to learn from. Ideally, you should have the CSS in it's own file (obviously), but it would be better to organize the JS in it's own script file as well.
This post was last modified: 03-01-2014, 04:46 PM by AceInfinity.


Microsoft MVP .NET Programming - (2012 - Present)
®Crestron DMC-T Certified Automation Programmer

Development Site: aceinfinity.net

 ▲
 ▲ ▲

03-01-2014, 05:26 PM #4
william7
Member
**
Posts: 205 Threads:49 Joined: Feb 2012 Reputation: 0

RE: Javascript problem
I still couldn't get the one in the video to work fully. The first picture comes up; whereas, previously I got zip. Yours works great Ace! I might use it to impress my teacher on the final project.

Yes, I saw an example of Javascript being kept in a separate folder. Right now we're having the value of putting everything possible in the external CSS. We're getting a walk through the CSS Zen Garden.

03-01-2014, 07:21 PM #5
AceInfinity
Developer
*******
Administrators
Posts: 9,733 Threads:1,026 Joined: Jun 2011 Reputation: 76

RE: Javascript problem
Quote:I still couldn't get the one in the video to work fully.

I wouldn't even bother with that video... It wasn't a good thing to be using in the first place. You could split what I had into another function to keep things consistent and easily maintainable for setting the inner HTML of the description <div>:
Code:
function set_description(text) {
  document.getElementById('description').innerHTML = text;
}

Call it each time you rotate/change an image with the other functions as:
Code:
set_description(_img_arr[_img_index]);

That's a very basic example though.
This post was last modified: 03-01-2014, 07:26 PM by AceInfinity.


Microsoft MVP .NET Programming - (2012 - Present)
®Crestron DMC-T Certified Automation Programmer

Development Site: aceinfinity.net

 ▲
 ▲ ▲




Forum Jump:


Possibly Related Threads...
Thread Author Replies Views Last Post
  Website problem william7 2 1,368 12-23-2016, 04:59 AM
Last Post: Mazzn
  Javascript-based Web Game - Untrusted AceInfinity 1 790 09-10-2015, 08:33 AM
Last Post: Mazzn
  Disabling JavaScript event selectively in Browsers Holmes.Sherlock 4 2,170 11-01-2014, 02:14 AM
Last Post: Louis
  Javascript Click iframe src on page load ѕα3єкα 1 1,270 06-17-2014, 06:09 PM
Last Post: AceInfinity
  Javascript Issue QBcrusher 1 1,189 01-05-2014, 02:37 PM
Last Post: KoBE


Users browsing this thread: 1 Guest(s)