JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<table>
    <tr>
        <td><a href="#" onclick="slideshowBack()">Back</a></td>
        <td>
            <a href="https://thelandconnection.org/donate" id="mylink"><img src="http://thelandconnection.org/sites/default/files/donateheartwithwords.jpg" border="0" width="75%" id="mypic" /></a>
        </td>
        <td><a href="#" onclick="slideshowUp()">Next</a></td>
    </tr>
</table>

<h2>Notes</h2>

<p>The way we use JavaScript has changed a lot in the last few years. Here are a few things about your code that stood out to me:<p>

<ul>
    <li><p>You don't need <tt>&lt;![CDATA[// >&lt;!--</tt> or the corresponding <tt>//--&gt;&lt;!]]&gt;</tt> anymore.</p></li>
    <li><p>Instead of <tt>&lt;script language="JavaScript"&gt;</tt>, you should do <tt>&lt;script type="text/javascript"&gt;</tt>.</p></li>
    <li><p>Instead of <tt>&lt;a href="javascript:slideshowUp()"&gt;</tt>, you should do <tt>&lt;a href="#" onclick="slideshowUp()"&gt;</tt>.</p></li>
    <li><p>You created an Image object with <tt>new Image()</tt>, but then never really used it, except to store the URL string in its <tt>src</tt> property (<tt>img1.src = "http://..."</tt>), and then later assign that string to <tt>mypic.src</tt>. Instead, you can skip the Image entirely by storing the string in a regular variable (<tt>imgUrl1 = "http://..."</tt>) and later assigning it directly to <tt>mypic.src</tt>, i.e. <tt>mypic.src = imgUrl1</tt>.</p></li>
    <li><p>...however, any time you're dealing with a list of items, you should use an array instead. An array is a list of items in square brackets and separated by commas, e.g. <tt>[ "One", "Two", "Three" ]</tt>. This lets you avoid weird stuff like <tt>eval("img" + num + ".src")</tt>* and lets you do <tt>images[num].src</tt> instead.</p></li>
    <li><p>Avoid w3schools.com like the plague. I cannot stress this enough. It's really, really bad.</p></li>
</ul>
    
    <p>*<small><tt>eval()</tt> is pretty much always bad.</small></p>

CSS

* { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 22px; }
small { font-size: 12px; }
tt { font-family: "Lucida Console", "Monaco", "Courier New", monospace; color: navy; font-size: 14px; background-color: lemonchiffon; display: inline-block; padding: 2px; border-radius: 2px; line-height: 18px; white-space: nowrap; }
small tt { font-size: 11px; }

JavaScript

// Use an array instead of img1, img2, etc. This way you can add or remove
// items in the middle without having to re-number the rest. Make an array by
// putting items between square brackets, separated by commas.
var images = [
    "http://thelandconnection.org/sites/default/files/donateheartwithwords.jpg",
    "http://thelandconnection.org/sites/default/files/2015cover_0.jpg",
    "http://thelandconnection.org/sites/default/files/holidaypartysalad.jpg",
    "http://thelandconnection.org/sites/default/files/cows.png"
];

var links = [
    "https://thelandconnection.org/donate",
    "http://thelandconnection.org/community/farmer-annotated-calendar",
    "http://thelandconnection.org/community/holiday-party",
    "http://thelandconnection.org/farmland/legacy/roundtables"
];

// Array indexes start at 0 instead of 1.
var num = 0;

function slideshowUp() {
    // Giving an element a "name" attribute, e.g. <img name="mypic" ...> and 
    // then referring to it by calling "document.mypic" won't work in some
    // modern browsers. It works in others only for compatability with old
    // web sites. The "right" way to get a reference to an HTML element is
    // to give it an "id" attribute (e.g. <img id="mypic" ...>, which you
    // already did) and then call document.getElementById("mypic"), like so:
    var mypic = document.getElementById("mypic");
    var mylink = document.getElementById("mylink");

    num = num + 1;

    // images.length is the number of items in the array. Since arrays start
    // at 0, if there are 4 items in the array their indexes will be 0, 1, 2,
    // and 3. When num is 3 or more, we know to go back to 0.
    if (num >= images.length) {
        num = 0;
    }

    // You get the first item in an array with images[0], the second with
    // images[1], etc., so if num is 1, images[num] is the same as images[1]
    mypic.src = images[num];
    mylink.href = links[num];
}

function slideshowBack() {
    var mypic =...