[SOLVED] Need To Change javascript classes(?)

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[SOLVED] Need To Change javascript classes(?)

Post by paulp575 »

Found a script to accomplish what I needed to do.
I need to change the categories so whomever takes over from me they will understand what the categories are (I like my categories to be accurately descriptive).
The program uses "category" and "subcategory". Need these to be change to "OHV Make" and "OHV Model".
I've tried various changes, but all of them break the javascript.

Code for the script:

Code: Select all

<script>
  function dynamicdropdown(listindex)
  {
    document.getElementById("subcategory").length = 0;
    switch (listindex)
    {
      case "CanAm" :
      document.getElementById("subcategory").options[0]=new Option("Select OHV model","");
      document.getElementById("subcategory").options[1]=new Option("Commander","Commander");
      document.getElementById("subcategory").options[2]=new Option("Defender","Defender");
      document.getElementById("subcategory").options[3]=new Option("Maverick","Maverick");
      document.getElementById("subcategory").options[4]=new Option("Outlander","Outlander");
      document.getElementById("subcategory").options[5]=new Option("Renegade","Renegade");
      document.getElementById("subcategory").options[6]=new Option("Other CanAm","Other CanAm");
      break;

      case "Honda" :
      document.getElementById("subcategory").options[0]=new Option("Select OHV model","");
      document.getElementById("subcategory").options[1]=new Option("Foreman","Foreman");
      document.getElementById("subcategory").options[2]=new Option("Pioneer","Pioneer");
      document.getElementById("subcategory").options[3]=new Option("Rancher","Rancher");
      document.getElementById("subcategory").options[4]=new Option("Recon","Recon");
      document.getElementById("subcategory").options[5]=new Option("Rincon","Rincon");
      document.getElementById("subcategory").options[6]=new Option("Rubicon","Rubicon");
      document.getElementById("subcategory").options[7]=new Option("Talon","Talon");
      document.getElementById("subcategory").options[8]=new Option("TRX","TRX");
      document.getElementById("subcategory").options[9]=new Option("Other Honda","Other Honda");
      break;

      case "Polaris" :
      document.getElementById("subcategory").options[0]=new Option("Select OHV model","");
      document.getElementById("subcategory").options[1]=new Option("Ace","Ace");
      document.getElementById("subcategory").options[2]=new Option("General","General");
      document.getElementById("subcategory").options[3]=new Option("Ranger","Ranger");
      document.getElementById("subcategory").options[4]=new Option("RZR","RZR");
      document.getElementById("subcategory").options[5]=new Option("Sportsman","Sportsman");
      document.getElementById("subcategory").options[5]=new Option("Other Polaris","Other Polaris");
      break;

      case "Suzuki" :
      document.getElementById("subcategory").options[0]=new Option("Select OHV model","");
      document.getElementById("subcategory").options[1]=new Option("KingQuad","KingQuad");
      document.getElementById("subcategory").options[2]=new Option("Other Suzuki","Other Suzuki");
      break;

      case "Yamaha" :
      document.getElementById("subcategory").options[0]=new Option("Select OHV model","");
      document.getElementById("subcategory").options[1]=new Option("Grizzly","Grizzly");
      document.getElementById("subcategory").options[2]=new Option("Kodiak","Kodiak");
      document.getElementById("subcategory").options[3]=new Option("Raptor","Raptor");
      document.getElementById("subcategory").options[4]=new Option("Viking","Viking");
      document.getElementById("subcategory").options[5]=new Option("Wolverine","Wolverine");
      document.getElementById("subcategory").options[6]=new Option("YZR","YZR");
      document.getElementById("subcategory").options[7]=new Option("Other Yamaha","Other Yamaha");
      break;

      case "Other" :
      document.getElementById("subcategory").options[0]=new Option("Select OHV model","");
      document.getElementById("subcategory").options[1]=new Option("Other OHV Model","Other OHV Model");
      break;
    }
    return true;
  }
</script>
Code for the form (ignore the 'table' and related tags as these are temporary holder):

Code: Select all

<table>
  <tr>
    <td>
      <section class="category_div" id="category_div">
        <select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
          <option value="" selected>Select OHV Make</option>
          <option value="CanAm">CanAm</option>
          <option value="Honda">Honda</option>
          <option value="Polaris">Polaris</option>
          <option value="Suzuki">Suzuki</option>
          <option value="Yamaha">Yamaha</option>
          <option value="Other">Other</option>
        </select>
        <script>
          document.write('<select name="subcategory" id="subcategory"><option value="">Select OHV Model</option></select>')
        </script>
      </section>
    </td>
  </tr>
</table>
Could I also change or delete the 'class="category_div" and "category_div" to something more understandable?
Last edited by paulp575 on Sat Nov 07, 2020 5:12 pm, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Need To Change javascript classes(?)

Post by Albert Wiersch »

Hello,

I took a look at this and I changed "subcategory" to "OHVModel" and "category" to "OHVMake" and it worked. If you are putting space characters in any of those then that's probably the problem.... IDs cannot contain space characters.

As for changing or deleting the class="category_div" and "category_div" to something more understandable, it shouldn't be a problem as long as it was changed in all the correct places... and of course, no added space characters.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Need To Change javascript classes(?)

Post by Albert Wiersch »

Also, you should not use document.write().

I highly recommend changing this:

Code: Select all

        <script>
          document.write('<select name="subcategory" id="subcategory"><option value="">Select OHV Model</option></select>')
        </script>
to this:

Code: Select all

<select name="subcategory" id="subcategory"><option value="">Select OHV Model</option></select>
I'm not sure why the document.write() was even in there in the first place.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Need To Change javascript classes(?)

Post by paulp575 »

Could I use "OHV_Model" and "OHV_Make"?

I've been told you can change spaces to underscores.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Need To Change javascript classes(?)

Post by Albert Wiersch »

paulp575 wrote: Wed Nov 04, 2020 11:12 am Could I use "OHV_Model" and "OHV_Make"?

I've been told you can change spaces to underscores.
Sure! That should work fine.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply