Unexpected Behavior of "if" statement when using "=" to test for equality

Question

I have the following JavaScript code, used to replace the code contained in a <div> of the page with a portion from another:

    function ReplaceContentInContainer(etiqueta) {
        var container = document.getElementById('contenedor');
        if (etiqueta="esTransportista") {
            container.innerHTML = document.getElementById('transportista').innerHTML;
        } else if (etiqueta="esCargador") {
            container.innerHTML = document.getElementById('cargador').innerHTML;
        }

    }

Then I call it from the page with the following code:

<input type='radio' name='esTransportista' id='esTransportista' value='1' onclick="javascript:ReplaceContentInContainer(esTransportista);">Es transportista <br />
<input type='radio' name='esTransportista' id='esCargador' value='0' onclick="javascript:ReplaceContentInContainer(esCargador);" checked>Es cargador <br />

And, finally, I have three <div>'s in my page, one to display the information < div id='contenedor'>< /div> and the other two containing the code to be displayed in this id='contenedor' I mentioned (being them <div id='transportista'>bla bla bla< /div> and < div id='cargador'>bla2 bla2 bla2< /div>).

The problem I face is that the JavaScript code seems to work just once. It changes the content of 'contenedor' the first time I check one of the radio buttons, but if I check the other one the JavaScript doesn't work anymore.

Is there any way I could make the JavaScript code work every time I click on any of the radio buttons?

I've been googling and most of the results I surfed refer to jQuery and bounding to elements that are vanished, but this is not my case, as far as I know...

Answer 1

Just doing a quick scan of you code and saw that your if (etiqueta="esTransportista") statement is incorrect. When comparing two objects you need the ==

Try

  function ReplaceContentInContainer(etiqueta) {
        var container = document.getElementById('contenedor');
        if (etiqueta=="esTransportista") {
            container.innerHTML = document.getElementById('transportista').innerHTML;
        } else if (etiqueta=="esCargador") {
            container.innerHTML = document.getElementById('cargador').innerHTML;
        }

    }

Answer 2

Your javascript has a small error:

function ReplaceContentInContainer(etiqueta) {
        var container = document.getElementById('contenedor');
        if (etiqueta == "esTransportista") {
            container.innerHTML = document.getElementById('transportista').innerHTML;
        } else if (etiqueta == "esCargador") {
            container.innerHTML = document.getElementById('cargador').innerHTML;
        }
    }

Notice in the if statement you had etiqueta = "esTransportista". That would make it save "esTransportista" to etiqueta and it would go into that part of the if statement.

By changing the = to == you compare to see if it is true.

EDIT

You should also change in your onclick="..." sections to put the names in single quotes:

onclick="javascript:ReplaceContentInContainer('esTransportista');"
onclick="javascript:ReplaceContentInContainer('esCargador');" 

That ensures that the javascript does not look for variables with those names and knows that you are passing strings.

Answer 3

There are two things preventing your code from working correctly:

• You are passing undefined variables to your function instead of strings
• You are using = where you should be using ===

The JavaScript expression you are using in your click handler is this:

ReplaceContentInContainer(esTransportista);

here, esTransportista is a variable reference, but since you don't have a variable with that name, the value undefined is passed to your function.

Inside your function, etiqueta has the value undefined, but when this if statement executes

if (etiqueta = "esTransportista") {
    container.innerHTML = document.getElementById('transportista').innerHTML;
}

the asssignment operator = assigns the value "esTransportista" to etiqueta, and then this value is passed onto the if statement. "esTransportista" is "truthy", so the body of that if block will always run.

---

To get your code to work as expected,

1. Pass string values to your function, not undefined variables:

ReplaceContentInContainer("esTransportista")  // note the quotes here    
ReplaceContentInContainer("esCargador")  // note the quotes here    

2. Use the === operator to compare a variable against a value:

if (etiqueta === "esTransportista") {
    container.innerHTML = document.getElementById('transportista').innerHTML;
} else if (etiqueta === "esCargador") {
    container.innerHTML = document.getElementById('cargador').innerHTML;
}

jsfiddle

---

As one additional (albeit optional) improvement. I suggest setting up your click handlers in your code, not putting them in your HTML. One way to do so (without getting too fancy) would look like this:

window.onload = function () {
    document.getElementById("esTransportista").onclick = function () {
        ReplaceContentInContainer("esTransportista");
    };

    document.getElementById("esCargador").onclick = function () {
        ReplaceContentInContainer("esCargador"); 
    };
};

If you put that in your code, you can remove the onclick attributes on your radio buttons and leave them as:

<input type='radio' name='esTransportista' id='esTransportista' value='1'>Es transportista
<br />
<input type='radio' name='esTransportista' id='esCargador' value='0' checked>Es cargador
<br />

jsfiddle