Variable from function into window.location.href 'not defined'

Question

Hello again people of Stack

I have a small problem with my code. I am trying to send my variable with the window.location.href , but I keep getting the error not defined .

This is the function wich chooses my image (src) and the id (chosenid) The chosenid does work as I've tested that.

function HeadShow() {
  var HeadItems = document.getElementById('HeadItems');
  HeadItems.style.display = 'block';
}

function headHide(src, chosenid) {

  var head = document.getElementById("head");
  var HeadItems = document.getElementById('HeadItems');
  HeadItems.style.display = 'none';
  head.innerHTML = "<img src='" + src + "' width=80; height=80;>";
  var chosenhead = chosenid;

}

Then, I also have the function which should send the variable to the next page:

function send() {
    window.location.href = "test3.php?head=" + chosenhead;
}

All I get is the error: chosenhead is not defined

Hope you guys can help me out with this.

Answer 1

Just declare the variable chosenhead globally. Also your head.innerHTML assignment is not correct.

Sample code

var chosenhead;

function headHide(src, chosenid) {

    var head = document.getElementById("head");
    var HeadItems = document.getElementById('HeadItems');
    HeadItems.style.display = 'none';
    head.innerHTML = "<img src='" + src + "' style='width=80; height=80;'>";
    chosenhead = chosenid;

}

function send() {
    window.location.href = "test3.php?head=" + chosenhead;
}

Also wont it be much better if you just use the parameter chosenid passed in the function send() ? It looks like a global variable.

Answer 2

You defined your chosenhead variable inside a function.. so it's only accessible in the scope of this function. Move it outside the function:

var chosenhead = '';

        function HeadShow() {
                    var HeadItems = document.getElementById('HeadItems');
                    HeadItems.style.display = 'block';
    }

    function headHide(src, chosenid) {

                    var head = document.getElementById("head");
                    var HeadItems = document.getElementById('HeadItems');
                    HeadItems.style.display = 'none';
                    head.innerHTML = "<img src='" +src+ "' width=80; height=80;>";
                    chosenhead = chosenid;

    }

    function send()
    {
        window.location.href = "test3.php?head=" + chosenhead;
    }

Answer 3

Change a bit:

var chosenhead = null; // define globally
function headHide(src, chosenid) {

                var head = document.getElementById("head");
                var HeadItems = document.getElementById('HeadItems');
                HeadItems.style.display = 'none';
                head.innerHTML = "<img src='" +src+ "' width=80; height=80;>";
                chosenhead = chosenid;

}

function send()
{
    if ( chosenhead != null )
      window.location.href = "test3.php?head=" + chosenhead;
    else {
      // some error handling ...
    }
}

Answer 4

You need to define the chosenhead variable as global.

Do that

var chosenhead = '';

And then call it in the

function send()
{
    window.location.href = "test3.php?head=" + chosenhead;
}