Javascript ignoring the + between "1+2+3" and "6" checkboxes

Discussion in 'JavaScript' started by gilgalbiblewheel, Jun 28, 2011.

  1. #1
    
    for(i=0;i<document.getElementsByName('checkresult_".$i."').length;++i){
        if(document.getElementsByName('checkresult_".$i."')[i].checked){
            thisurlext+=document.getElementsByName('checkresult_".$i."')[i].value;
            checkedlength++;
            if(i+1<document.getElementsByName('checkresult_".$i."').length){
                if(document.getElementsByName('checkresult_".$i."')[i+1].checked){
                    thisurlext+='+';
                }
            }
        }
    };
    
    Code (markup):
    Let's say I check verses 1, 2, 3, 6 I want the Javascript not to ignore the + between the 3 and the 6:
    <div id="txt_kjv0_1_1_0" style="float: left; background-color: rgb(234, 232, 200); margin: 0px; width: 178px; height: 497px; border: 1px solid rgb(122, 16, 16); padding: 5px 5px 0px; overflow-y: auto; overflow-x: hidden;">
    <input id="sc0" value="kjv" type="hidden">
    					<p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_0" name="checkresult_0" onclick="" value="1" type="checkbox"><span style="font-weight: bold; margin: 2px;">1</span>In the beginning God created the heaven and the earth.</p>
    					<p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_1" name="checkresult_0" onclick="" value="2" type="checkbox"><span style="font-weight: bold; margin: 2px;">2</span>And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters.</p>
    
    					<p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_2" name="checkresult_0" onclick="" value="3" type="checkbox"><span style="font-weight: bold; margin: 2px;">3</span>And God said, Let there be light: and there was light.</p>
    					<p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_3" name="checkresult_0" onclick="" value="4" type="checkbox"><span style="font-weight: bold; margin: 2px;">4</span>And God saw the light, that it was good: and God divided the light from the darkness.</p>
    					<p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_4" name="checkresult_0" onclick="" value="5" type="checkbox"><span style="font-weight: bold; margin: 2px;">5</span>And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day.</p>
    					<p id="regular[]" name="bibletext" style="float: left; text-align: left; width: 155px; display: block; padding: 0px 2px; font-size: 12px;"><input id="check0_5" name="checkresult_0" onclick="" value="6" type="checkbox"><span style="font-weight: bold; margin: 2px;">6</span>And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters.</p>
    Code (markup):

     
    gilgalbiblewheel, Jun 28, 2011 IP
  2. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ok, couple a noob mistakes that make your life difficult there bro/sis..

    id="regular[]" is invalid. The [ and ] characters are not allowed i think.

    id= and name= need to be UNIQUE per page/iframe (and ideally the same per tag).

    it's bad practice to put visual markup like font-weight:bold and margin:2px in every tag that uses it.
    in stead, make that <span> that uses the markup have a <span class="indexNumber">, then put this line in your <head>:
    <link type='text/css' rel='StyleSheet' media='screen' href='/path/to/page.css'>
    then create that file page.css, and put in it:
    .indexNumber {
    font-weight : bold;
    margin : 2px;
    }
    And voila; welcome to the wonderful world of CSS ;-)

    Your <input> tags need to end with />

    it's (imo) better to use document.getElementById() than .getElementsByName()
    if you want to select whole ranges of elements, the best option and industry standard of this moment, is including http://jquery.com library in your <head>, adding class="someClass" to all tags that need it, and then selecting those in javascript by calling $('.someClass')
    But this might be above your learning curve right now, so let's go back to your original javascript;

    thisurlext = '';
    for(i=0;i<document.getElementsByName('checkresult_".$i."').length;++i){
    if(document.getElementsByName('checkresult_".$i."').checked){
    if (thisurlext!='') thisurlext+='+';
    thisurlext+=document.getElementsByName('checkresult_".$i."').value;
    checkedlength++;
    }
    };
    this might help in fixing the issue.
     
    tolas, Jul 9, 2011 IP
  3. ayushi infotech

    ayushi infotech Peon

    Messages:
    1,814
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks brother nice work.
     
    ayushi infotech, Jul 10, 2011 IP