How to solve TypeError: getElementById null in javascript

Question

I am trying to redirect users to another link via javascript. When users select an option from radio box and click on the button then javascript redirects user to a link like, sitename.com/events/text-which-user-selected-from-radio-box. I am fetching radiobox data from php.Here is my code,

<?php

foreach ($words as $word){   
         if($results > 3)
             echo "<input name='tuh' type='radio' id='".str_replace(' ', '-', $word->name)."' value='".$word->name."'/>". $word->name."|".get_permalink($word->ID)."\n"."<br/>";

        else
             echo "<input name='tuh' type='radio' id='".str_replace(' ', '-', $word->name)."' value='".$word->name."'/>".$word->name."\n"."<br/>"; 


    }

    ?>
<input type='button' value='write review' onclick="js_tuh()" />

This code returns HTML like this,

<input name='tuh' type='radio' id='Amsterdam-International-Salsa- Congress'     value='Amsterdam International Salsa Congress'/>Amsterdam International Salsa Congress|
<br/>
<input name='tuh' type='radio' id='Amsterdam-Salsa-&amp;-Zouk-Festival'          value='Amsterdam Salsa &amp; Zouk Festival'/>Amsterdam Salsa &amp; Zouk Festival|

I also used php inside javascript, Here is my javascript code,

<script type='text/javascript'>

        function js_tuh(){

        <?php

            foreach ($words as $word){

        ?>
            id_tuh=document.getElementById("<?php echo str_replace(' ', '-', $word->name); ?>");

             if(id_tuh.checked == true){
            // alert(id_tuh.value);
            window.location = "http://beta.salsatraveladvisor.com/events/"+id_tuh.id; 
             }
            <?php } ?>
            }

        </script>

And php returns javascript code like this,

    <script type='text/javascript'>

        function js_tuh(){

    id_tuh=document.getElementById("Amsterdam-  International-Salsa-Congress");

             if(id_tuh.checked == true){
             alert(id_tuh.value);
             //alert(id_tuh.value);
    //window.location.replace("http://www.salsatraveladvisor.com/events/"+id_tuh.value);
            window.location = "http://beta.salsatraveladvisor.com/events/"+id_tuh.id; 
             }
   id_tuh=document.getElementById("Amsterdam-Salsa-&amp;-Zouk-Festival");

             if(id_tuh.checked == true){
             alert(id_tuh.value);
             //alert(id_tuh.value);
    //window.location.replace("http://www.salsatraveladvisor.com/events/"+id_tuh.value);
            window.location = "http://beta.salsatraveladvisor.com/events/"+id_tuh.id; 
             }
                            }

        </script>

When I click first radio box and click on the button, it works fine. But when I select second radiobox and click on the submit button it returns

TypeError: id_tuh is null [Break On This Error]

if(id_tuh.checked == true){

Please give me a suggestion what should I do now.

Please never write == true.

Ry-
– Ry- ♦

2013-07-15 16:29:08 +00:00
Commented Jul 15, 2013 at 16:29 — Ry-
– Ry- ♦, Commented Jul 15, 2013 at 16:29
I don't think your IDs are valid.

j08691
– j08691

2013-07-15 16:29:38 +00:00
Commented Jul 15, 2013 at 16:29 — j08691
– j08691, Commented Jul 15, 2013 at 16:29

Ry- · Accepted Answer · 2013-07-15 16:40:37Z

1

id_tuh=document.getElementById("Amsterdam-Salsa-&amp;-Zouk-Festival");

is the wrong ID. This HTML:

<input name='tuh' type='radio' id='Amsterdam-Salsa-&amp;-Zouk-Festival'          value='Amsterdam Salsa &amp; Zouk Festival'/>

produces the ID Amsterdam-Salsa-&-Zouk-Festival — HTML entities are still interpreted just fine in attributes — and so you need to use that.

The better solution, of course, would be to produce and use an actual slug that doesn’t contain ampersands or uppercase characters.

function slug($name) {
    return preg_replace('/[^a-z]+/', '-', strtolower($name));
}

echo '<input name="tuh" type="radio" id="', slug($word->name),
     '" value="', htmlspecialchars($word->name), '" />',
     htmlspecialchars($word->name, ENT_NOQUOTES), '|',
     get_permalink($word->ID), "\n<br/>";

Also, I had to swap the quotes for accuracy in htmlspecialchars, but it looks better that way anyways.

edited Jul 15, 2013 at 16:40

answered Jul 15, 2013 at 16:30

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mushfiqul Tuhin Over a year ago

thanks for your replay. I have tried your codes, but it does not return the link as "Amsterdam-Salsa-&-Zouk-Festival". Which does not display valid result. To display valid result the link should be as like as "Amsterdam-Salsa-&-Zouk-Festival. Please give me a solution.

Ry- Over a year ago

@MushfiqulTuhin: I figured you’d try my codes. Now please read my sentences.

Collectives™ on Stack Overflow

How to solve TypeError: getElementById null in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related