www.webdeveloper.com
Results 1 to 7 of 7

Thread: Javascript conflict?

Hybrid View

  1. #1
    Join Date
    Nov 2011
    Location
    Seattle
    Posts
    3

    Unhappy Javascript conflict?

    I found some Javascript code for calculating calories burned and copied it onto the HTML view of a Page on my Wordpress site, but the script will not execute.

    I'm not a programmer, but I have seen some plug-ins not work as a result of a Javascript conflict. Is there something simple I can do to test that (turn it on/off or initialize it or something)?

    The page is:
    http://newlifeharmony.com/tools/fitn...e-calculators/

    And I got the code here:
    http://www.everydayhealth.com/Calori...d-Swimming.htm

    Thanks for any help you can provide!

  2. #2
    Join Date
    Oct 2011
    Location
    Vero Beach, Florida
    Posts
    70
    I see two problems immediately:
    1. The javascript code for each calculation is updating the innerHTML for an element with id 'divResultWFM' but that element does not seem to be in the code anywhere.
    2. Each calculator has the same names, for example 'txtWeightWFM', so to make it work you would need to change the names for each type of exercise to be unique. For example, it looks like you could change all occurrences of 'WFM' in each calculator to represent the exercise type, like 'WLK', 'RUN', 'SWM', 'YOG', 'BIK' etc.
    space
    Orchid Technical Services
    Website Design/Development and Technical Support

  3. #3
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    428
    Hi Suzi
    there are a few problems by using the code twice or more, how Developer Bill wrote. Best way is to rewrite the JS Code to make it ready for multiple using. This can be done very quickly, so here's the html an js:

    HTML Code:
    <script type="text/javascript">
    function CalculateWFM(button){
     var tab = button.parentNode.parentNode.parentNode.parentNode;
     var selPaceWFM    = tab.getElementsByTagName('select')[0];
     var txtWeightWFM = tab.getElementsByTagName('input')[0];
     var selWeightWFM = tab.getElementsByTagName('select')[1];
     var txtTimeWFM    = tab.getElementsByTagName('input')[1];
     var selTimeWFM    = tab.getElementsByTagName('select')[2];
     var divResultWFM  = tab.rows[6].cells[0];
     if(txtWeightWFM.value ==''|| isNaN(txtWeightWFM.value)){
     	alert('Please enter a valid weight');
             txtWeightWFM.focus();
             return false;
     }
     if(txtTimeWFM.value==''||isNaN(txtTimeWFM.value)){
     	alert('Please enter a valid time');
             txtTimeWFM.focus();
             return false;
     }
     var hr; var kg; var cb;
     if(selTimeWFM.value!=1){
     	hr= txtTimeWFM.value/60;
     }else{
     	hr= txtTimeWFM.value;
     }
     if(selWeightWFM.value!=1){
     	kg= txtWeightWFM.value*.45359237;
     }else{
     	kg= txtWeightWFM.value;
     }
     if(kg > 182 || kg < 22){
     	alert('Please enter a valid weight');
             txtWeightWFM.focus();return false;
     }
     if(hr >12 || hr<=0){
     	alert('Please enter a valid time');
             txtTimeWFM.focus();return false;
     }
     cb=Math.round((kg*selPaceWFM.value)*hr);
     divResultWFM.innerHTML ='You burned '+cb+' calories!';
     }
    </script>
    <div class="su-box" style="border:1px solid #0052a3">
    <div class="su-box-title" style="background-color:#0066CC;border-top:1px solid #99c2eb;text-shadow:1px 1px 0 #001f3d">Calories Burned Walking</div>
    <div class="su-box-content">
    <table>
    <tbody>
    <tr>
    <td colspan="3">Calories Burned Calculator</td>
    </tr>
    <tr>
    <td colspan="3">Estimate the calories you burned walking:</td>
    </tr>
    <tr>
    <td>Pace:</td>
    <td colspan="2">
    <select id="selPaceWFM" name="selPaceWFM">
    <option value="2.5">walking, 2.0 mph, level, slow pace, firm surface</option>
    <option value="2.8">walking,2 .5 mph, downhill</option>
    <option value="3">walking, 2.5 mph, firm surface</option>
    <option value="3.3">walking, 3.0 mph, level, moderate pace, firm surface</option>
    <option value="3.8">walking, 3.5 mph, level,brisk, firm surface, for exercise</option>
    <option value="6">walking, 3.5 mph, uphill</option>
    <option value="5">walking, 4.0 mph, level, firm surface, very brisk pace</option>
    <option value="6.3">walking, 4.5 mph, level, firm surface, very, very brisk</option>
    <option value="8">walking, 5.0 mph</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Weight:</td>
    <td style="width: 50px;">
    <input id="txtWeightWFM" style="width: 40px;" type="text" name="txtWeightWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selWeightWFM" style="width: 95px;" name="selWeightWFM">
    <option value="2">Pounds</option>
    <option value="1">Kilograms</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Time:</td>
    <td style="width: 50px;">
    <input id="txtTimeWFM" style="width: 40px;" type="text" name="txtTimeWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selTimeWFM" style="width: 95px;" name="selTimeWFM">
    <option value="1">Hours</option>
    <option value="2">Minutes</option>
    </select>
    </td>
    </tr>
    <tr>
    <td colspan="3">
    <input id="btnCalculateWFM" onclick="CalculateWFM(this);" type="button" name="btnCalculateWFM" value="Calculate" /></td>
    </tr>
    <tr>
    <td colspan="3"></td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    
    <!-- next Box -->
    <div class="su-box" style="border:1px solid #7a0000">
    <div class="su-box-title" style="background-color:#990000;border-top:1px solid #d69999;text-shadow:1px 1px 0 #2e0000">Calories Burned Running</div>
    <div class="su-box-content">
    <table>
    <tbody>
    <tr>
    <td colspan="3">Calories Burned Calculator</td>
    </tr>
    <tr>
    <td colspan="3">Estimate the calories you burned running:</td>
    </tr>
    <tr>
    <td>Pace:</td>
    <td colspan="2">
    <select id="selPaceWFM" name="selPaceWFM">
    <option value="8">running 5 mph (12 min/mile)  8.04 kmh (7.46 min/km)</option>
    <option value="9">running 5.2 mph (11.5 min/mile)  8.36 kmh (7.18 min/km)</option>
    <option value="10">running 6 mph (10 min/mile)  9.66 kmh (6.21 min/km)</option>
    <option value="11">running 6.7 mph (9 min/mile)  10.78 kmh (5.57 min/km)</option>
    <option value="11.5">running 7 mph (8.5 min/mile)  11.27 kmh (5.32 min/km)</option>
    <option value="12.5">running 7.5 mph (8 min/mile)  12.07 kmh (4.97 min/km)</option>
    <option value="13.5">running 8 mph (7.5 min/mile)  12.87 kmh (4.66 min/km)</option>
    <option value="14">running 8.6 mph (7 min/mile)  13.84 kmh (4.34 min/km)</option>
    <option value="15">running 9 mph (6.5 min/mile)  14.48 kmh (4.14 min/km)</option>
    <option value="16">running 10 mph (6 min/mile)  16.09 kmh (3.73 min/km)</option>
    <option value="18">running 10.9 mph (5.5 min/mile)  17.54 kmh (3.42 min/km)</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Weight:</td>
    <td style="width: 50px;">
    <input id="txtWeightWFM" style="width: 40px;" type="text" name="txtWeightWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selWeightWFM" style="width: 95px;" name="selWeightWFM">
    <option value="2">Pounds</option>
    <option value="1">Kilograms</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Time:</td>
    <td style="width: 50px;">
    <input id="txtTimeWFM" style="width: 40px;" type="text" name="txtTimeWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selTimeWFM" style="width: 95px;" name="selTimeWFM">
    <option value="1">Hours</option>
    <option value="2">Minutes</option>
    </select>
    </td>
    </tr>
    <tr>
    <td colspan="3">
    <input id="btnCalculateWFM" onclick="CalculateWFM(this);" type="button" name="btnCalculateWFM" value="Calculate" /></td>
    </tr>
    <tr>
    <td colspan="3"></td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    
    <!-- next Box -->
    <div class="su-box" style="border:1px solid #000029">
    <div class="su-box-title" style="background-color:#000033;border-top:1px solid #9999ad;text-shadow:1px 1px 0 #00000f">Calories Burned Biking</div>
    <div class="su-box-content">
    <table>
    <tbody>
    <tr>
    <td colspan="3">Calories Burned Calculator</td>
    </tr>
    <tr>
    <td colspan="3">Estimate the calories you burned on your bike ride:</td>
    </tr>
    <tr>
    <td>Pace:</td>
    <td colspan="2">
    <select id="selPaceWFM" name="selPaceWFM">
    <option value="4">Biking &lt; 10 mph</option>
    <option value="6">Biking 10-12 mph</option>
    <option value="8">Biking 12-14 mph</option>
    <option value="10">Biking 14-16 mph</option>
    <option value="12">Biking 16-20 mph</option>
    <option value="16">Biking &gt; 20 mph</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Weight:</td>
    <td style="width: 50px;">
    <input id="txtWeightWFM" style="width: 40px;" type="text" name="txtWeightWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selWeightWFM" style="width: 95px;" name="selWeightWFM">
    <option value="2">Pounds</option>
    <option value="1">Kilograms</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Time:</td>
    <td style="width: 50px;">
    <input id="txtTimeWFM" style="width: 40px;" type="text" name="txtTimeWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selTimeWFM" style="width: 95px;" name="selTimeWFM">
    <option value="1">Hours</option>
    <option value="2">Minutes</option>
    </select>
    </td>
    </tr>
    <tr>
    <td colspan="3">
    <input id="btnCalculateWFM" onclick="CalculateWFM(this);" type="button" name="btnCalculateWFM" value="Calculate" /></td>
    </tr>
    <tr>
    <td colspan="3"></td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    
    <!-- next Box -->
    <div class="su-box" style="border:1px solid #527a00">
    <div class="su-box-title" style="background-color:#669900;border-top:1px solid #c2d699;text-shadow:1px 1px 0 #1f2e00">Calories Burned doing Yoga</div>
    <div class="su-box-content">
    <table>
    <tbody>
    <tr>
    <td colspan="3">Calories Burned Calculator</td>
    </tr>
    <tr>
    <td colspan="3">Estimate the calories you burned doing Yoga:</td>
    </tr>
    <tr>
    <td>Type:</td>
    <td colspan="2">
    <select id="selPaceWFM" name="selPaceWFM">
    <option value="7">Intense Yoga (Ashtanga/Vinyasa/Power/Classical Hatha)</option>
    <option value="10">Bikram Yoga</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Weight:</td>
    <td style="width: 50px;">
    <input id="txtWeightWFM" style="width: 40px;" type="text" name="txtWeightWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selWeightWFM" style="width: 95px;" name="selWeightWFM">
    <option value="2">Pounds</option>
    <option value="1">Kilograms</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Time:</td>
    <td style="width: 50px;">
    <input id="txtTimeWFM" style="width: 40px;" type="text" name="txtTimeWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selTimeWFM" style="width: 95px;" name="selTimeWFM">
    <option value="1">Hours</option>
    <option value="2">Minutes</option>
    </select>
    </td>
    </tr>
    <tr>
    <td colspan="3">
    <input id="btnCalculateWFM" onclick="CalculateWFM(this);" type="button" name="btnCalculateWFM" value="Calculate" /></td>
    </tr>
    <tr>
    <td colspan="3"></td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>


    Swon

  4. #4
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    428
    And the last box:
    HTML Code:
    <!-- next Box -->
    <div class="su-box" style="border:1px solid #0029a3">
    <div class="su-box-title" style="background-color:#0033CC;border-top:1px solid #99adeb;text-shadow:1px 1px 0 #000f3d">Calories Burned Swimming</div>
    <div class="su-box-content">
    <table>
    <tbody>
    <tr>
    <td colspan="3">Calories Burned Calculator</td>
    </tr>
    <tr>
    <td colspan="3">Estimate the calories you burned swimming:</td>
    </tr>
    <tr>
    <td>Pace:</td>
    <td colspan="2">
    <select id="selPaceWFM" name="selPaceWFM">
    <option value="4">swimming, treading water, moderate effort, general</option>
    <option value="6">swimming, lake, ocean, river</option>
    <option value="6">swimming, leisurely, not lap swimming, general</option>
    <option value="7">swimming laps, freestyle, slow, moderate or light effort</option>
    <option value="7">swimming, backstroke, general</option>
    <option value="8">swimming, crawl, slow (50 yards/minute), moderate or light effort</option>
    <option value="8">swimming, sidestroke, general</option>
    <option value="8">swimming, synchronized</option>
    <option value="10">swimming, treading water, fast vigorous effort</option>
    <option value="10">swimming, breaststroke, general</option>
    <option value="10">swimming laps, freestyle, fast, vigorous effort</option>
    <option value="11">swimming, butterfly, general</option>
    <option value="11">swimming, crawl, fast (75 yards/minute), vigorous effort</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Weight:</td>
    <td style="width: 50px;">
    <input id="txtWeightWFM" style="width: 40px;" type="text" name="txtWeightWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selWeightWFM" style="width: 95px;" name="selWeightWFM">
    <option value="2">Pounds</option>
    <option value="1">Kilograms</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="width: 110px;">Time:</td>
    <td style="width: 50px;">
    <input id="txtTimeWFM" style="width: 40px;" type="text" name="txtTimeWFM" value="0" maxlength="6/" /></td>
    <td style="width: 190px;">
    <select id="selTimeWFM" style="width: 95px;" name="selTimeWFM">
    <option value="1">Hours</option>
    <option value="2">Minutes</option>
    </select>
    </td>
    </tr>
    <tr>
    <td colspan="3">
    <input id="btnCalculateWFM" onclick="CalculateWFM(this);" type="button" name="btnCalculateWFM" value="Calculate" /></td>
    </tr>
    <tr>
    <td colspan="3"></td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>


    Swon

  5. #5
    Join Date
    Nov 2011
    Location
    Seattle
    Posts
    3
    Thanks Bill and Swon, I see the concern over using the same name for each piece. However, it still will not execute even when I only use one table. I'm wondering if I am having a javascipt conflict. Is there someway to re-load or something before the page loads? I don't know if I'm using the right terminology or not.

  6. #6
    Join Date
    Oct 2011
    Location
    Vero Beach, Florida
    Posts
    70
    Suzi, I tried Swon's suggested solution (very ingenious) in a page by itself, and it worked for me. One thing I would suggest is moving the JavaScript calculate function (starting with <script type="text/javascript"> and ending with </script> and placing it in the HEAD section of the Wordpress page - hopefully your theme has an option to add code to the HEAD.

    Swon's code presents the resulting calories burned as a new line in the box, below the calculate button. If that's not how you want it, it would not be hard to present it another way. He or I could give you the appropriate change.
    space
    Orchid Technical Services
    Website Design/Development and Technical Support

  7. #7
    Join Date
    Nov 2011
    Location
    Seattle
    Posts
    3

    Smile

    Thank you both!! You did a lot of work. I am checking with my Theme folks to find out how I add it to the Head section of my page.

    I have to say that everyone I've dealt with from the WooTheme Folks to you here in the Webdeveloper team have been instrumental in getting me going.

    I appreciate it. I'll let you know how it turns out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles