HTML Hidden Input value change with javascript and clicking text

Question

Ok, so this seems like it should be very straight forward, but I have been stuck on this for hours. Objective: I want to store a variable on my page based on if I last clicked on the "Delivery" or "Pickup" div section of the page.

I have Jquery that uses the following code to switch what is shown on the page (first segment in section). Everything works except .value and .innerHTML:

$(document).ready(function(){
                  $("#pickup_click_link").click(function(){
                    $('#delivery_stuff').fadeOut('fast', function(){
                        $('#pickup_stuff').fadeIn('fast');
                    });
                    $('#delivery_stuff2').fadeOut('fast', function(){
                        $('#pickup_stuff2').fadeIn('fast');
                    });

                    $("#pickup_button").css("background-color","silver");                       
                    $("#delivery_button").css("background-color","white");  
                    window.onload = function(){
                        document.getElementById('pu_del_nav_var').value='Pickup';
                        document.getElementById('pu_del_nav_varTEST').innerHTML='Pickup';
                    }
                  });
                });

                $(document).ready(function(){
                  $("#delivery_click_link").click(function(){
                    $('#pickup_stuff').fadeOut('fast', function(){
                        $('#delivery_stuff').fadeIn('fast');
                    });
                    $('#pickup_stuff2').fadeOut('fast', function(){
                        $('#delivery_stuff2').fadeIn('fast');
                    });
                    $("#pickup_button").css("background-color","white");                        
                    $("#delivery_button").css("background-color","silver"); 
                    delivery_click();
                  });
                });

I tried to put the code that is giving me the error (.value ="Pickup/Delivery" and .innerHTML="Pickup/Delivery") onload, in a seperate function, after the Div and Input, but I always get the error Uncaught TypeEror: Cannot set property 'value' of null

function delivery_click() {  
                                    document.getElementById('#pu_del_nav_var').value='Delivery';    
                                    document.getElementById('#pu_del_nav_varTEST').innerHTML='Delivery';    
                                    alert("Delivery!");
                                }

How can I get this javascript to work so it changes this input and the information where "temp here" is?

<input type="hidden" id="pu_del_nav_var" name="pu_del_nav_var" value="Pickup">
<div name='pu_del_nav_varTEST' id='pu_del_nav_varTEST'>temp here</div>

Venkata Krishna · Accepted Answer · 2013-11-25 21:36:29Z

1

$('#pu_del_nav_var').val('Delivery');
$('#pu_del_nav_varTEST').html('Delivery');

Besides, why would you want to mix jquery & javascript with selectors.

answered Nov 25, 2013 at 21:36

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

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

3 Comments

DrCord Over a year ago

jQuery is javascript and there are reasons to use regular javascript with jQuery all the time.

Venkata Krishna Over a year ago

@DrCord - ofcourse. But selectors? That would be a NO for me.

sweaty Over a year ago

Krishna - Thank you! The short answer on why I did it that way is I'm still learning. You are amazing. It won't let me accept your answer yet, but I will.

Collectives™ on Stack Overflow

HTML Hidden Input value change with javascript and clicking text

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related