-1

When the checkbox is selected, it is supposed to make some elements null and turn to grey. The function was working a few days ago but suddenly is not, i don't really understand why. I used elements of it in another function, and I don't know if that's related but I'll leave the code for those too. The problem is that, how it is, it returns "Cannot set property 'backgroundColor' of undefined" regarding, firstly, morada2, but that one doesn't return null. It enters the if, but it's not capable of executing what's inside. If I change the document.getElementByID.checked to checkBox.checked

var checkcheck = document.getElementById("checkcheck").value;
  var checkBox = document.getElementById("idtipomorada").value;
  var morada2 = document.getElementById("morada2").value;
  var cidade2 = document.getElementById("cidade2").value;
  var codpostal2 = document.getElementById("codpostal2").value;
  var concelho2 = document.getElementById("concelho2").value;
  var distrito2 = document.getElementById("distrito2").value;
  var pais2 = document.getElementById("pais2").value;

  function validate() {
    
    if (document.getElementById("idtipomorada").checked == true){
  
      console.log("erro aqui");
      morada2.style.backgroundColor = "rgb(150, 155, 153)";
      document.getElementById("morada2").disabled = true;
      cidade2.style.backgroundColor = "rgb(150, 155, 153)";
      document.getElementById("cidade2").disabled = true;
      codpostal2.style.backgroundColor = "rgb(150, 155, 153)";
      document.getElementById("codpostal2").disabled = true;
      concelho2.style.backgroundColor = "rgb(150, 155, 153)";
      document.getElementById("concelho2").disabled = true;
      distrito2.style.backgroundColor = "rgb(150, 155, 153)";
      document.getElementById("distrito2").disabled = true;
      pais2.style.backgroundColor = "rgb(150, 155, 153)";
      document.getElementById("pais2").disabled = true;
      checkcheck = "true";
  
    } else if (checkBox.checked == false) {
  
      morada2.style.backgroundColor = "white";
      document.getElementById("morada2").disabled = false;
      cidade2.style.backgroundColor = "white";
      document.getElementById("cidade2").disabled = false;
      codpostal2.style.backgroundColor = "white";
      document.getElementById("codpostal2").disabled = false;
      concelho2.style.backgroundColor = "white";
      document.getElementById("concelho2").disabled = false;
      distrito2.style.backgroundColor = "white";
      document.getElementById("distrito2").disabled = false;
      pais2.style.backgroundColor = "white";
      document.getElementById("pais2").disabled = false;
      checkcheck = "false";
    } else {
      console.log("erro");

    }
    return(checkcheck);
    console.log(checkcheck);
  }

function guardarMorada0() {

  
  var checked = document.getElementById("checkcheck").value;
  if (checked == "true") {
    guardarUma();
  } else {
    guardarDuas();
  }

}
<input type="checkbox" id="idtipomorada" onclick="validate()">
<label style="font-weight: lighter;">&nbspA minha morada de faturação é a mesma que a morada de envio</label>
<p id="checkcheck"></p>

, it doesn't recignize either the if or the else, and so, doesn't return the backgroundColor error. I've tried putting the variables outside, inside, change names, change trues and falses to strings and back and nothing works. It's not a cache problem either. Note: the paragraph is there simply because I needed to verify is the return values were the ones I wanted.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
curious
  • 11
  • 1
  • 7
  • 2
    Your code attempts to set numerous variables to the `.value` of various DOM elements, but it does this immediately (before the user gets a chance to enter any input). Instead, you should set your variables to the elements themselves and then, after the user has interacted with the fields, get the `.value`. – Scott Marcus Jan 13 '21 at 16:27
  • 1
    Also, as it is now, your code returns the following error: `"Uncaught TypeError: Cannot read property 'value' of null"`, which means that one (or more) of those initial variable declarations is looking for an element, based on its `id` and no element with that `id` exists. – Scott Marcus Jan 13 '21 at 16:28
  • Does this answer your question? [Global variable not changing on event](https://stackoverflow.com/questions/19120122/global-variable-not-changing-on-event) – Heretic Monkey Jan 13 '21 at 16:31
  • Thank you, that helped! – curious Jan 13 '21 at 16:40

3 Answers3

0

Ok, solved it, bascially I just couldn't do getElementByID.value, just the getElementByID part. I changed it to var morada2 = getElementById("morada2"); and it works perfectly like it used to.

curious
  • 11
  • 1
  • 7
0

instead of putting

 var morada2 = document.getElementById ("mor2"). value;

just put

 var morada2 = document.getElementById ("morada2")

Because you are trying to access "style" of the variable morada2 but its content is a value and not the element itself. That is why "backgroundColor" is not defined, because "style" does not exist.

do the same for the other variables

Franklin Dias
  • 1
  • 3
-2

It may not be your problem, but I noticed something strange in your code.

First you create the variable this way

 var morada2 = document.getElementById ("mor2"). value;

But then you try to change the background like this

 morada2.style.backgroundColor = "white";

the variable "morada2" is not the element itself but the element's ** value **. Isn't that the problem?

Anyway, what kind of content does this id have? (div, input, span, p)?

Franklin Dias
  • 1
  • 3