No puedo actualizar el valor de userPickColor por alguna razón, siempre está indefinido. Pero trato de console.log dentro de las funciones y mis valores realmente están cambiando. Pero por alguna razón, una vez que lo llamo fuera de la función, no se actualiza en absoluto. Todavía soy nuevo en Javascript, así que por favor ayúdame

Aquí está mi código:

 var white = document.getElementById("white");
 var black = document.getElementById("black");
 var userPickColor;

 white.addEventListener("click", whiteshirt);
 black.addEventListener("click", blackshirt);

 function whiteshirt(){
   userPickColor= "white";
 }

function blackshirt(){
  userPickColor= "black";
}

ShirtDescrp.innerHTML = userPickColor;
2
minimizer 30 oct. 2019 a las 21:37

4 respuestas

La mejor respuesta

Como han dicho otros, debe colocar la línea que actualiza el .innerHTML dentro de las funciones de devolución de llamada para que después de que se haya actualizado la variable, también pueda actualizar la página con el valor de variable más actual.

Pero, yendo un paso más allá ... Existe una metodología de codificación común llamada DRY (Don't Repeat Yourself) y tiene dos funciones de devolución de llamada que en gran medida hacen lo mismo. La única diferencia es el texto real que se establece. Esas dos funciones se ejecutan cuando se hace clic en uno de los dos elementos de su página y esos dos elementos tienen el texto que desea utilizar como sus id s. Podríamos combinar fácilmente las dos devoluciones de llamada en una sola como esta:

var ShirtDescrp = document.getElementById("des");

// There's nothing wrong with variables if they help you read the code
// more easily, but if you won't be using the value they store more than
// once, they don't really add much.
document.getElementById("white").addEventListener("click", changeColor);
document.getElementById("black").addEventListener("click", changeColor);

function changeColor() { 
  // No variable needed. Just set the text to the id of the element that got clicked
  // "this" here refers to the object that initiated the call for the current function
  // which will be one of the two buttons.
  ShirtDescrp.innerHTML = this.id;
}
<button id="white">white</button>
<button id="black">black</button>

<p id="des"></p>
3
Scott Marcus 30 oct. 2019 a las 19:28

Ya recibió su respuesta ... El cambio no afecta ya que la actualización no está ocurriendo dentro del detector de eventos. Esto es solo una recomendación de cómo lo haría (especialmente si tuviera más opciones de color):

  <p id="color-name">none</p>

  <div class="color-buttons">
    <button id="white">White</button>
    <button id="black">Black</button>
    <button id="orange">Orange</button>
    <button id="blue">Blue</button>
    <button id="green">Green</button>
    <button id="red">Red</button>
  </div>

JavaScript como:

var buttons = document.querySelectorAll(".color-buttons button");
var color_name = document.getElementById("color-name");

buttons.forEach(function(btn){
  btn.addEventListener("click", function(){
    color_name.style.background=this.id;
    color_name.innerHTML=this.id;
  });
});

Aquí está el fiddle para jugar.

Probablemente también generaría esos botones dinámicamente también. Y tampoco usaría id para almacenar color, pero usaría algo más como data-color='red' por ejemplo.

0
Elnoor 30 oct. 2019 a las 19:39

Debe actualizar el DOM igual que la variable:

var white = document.getElementById("white");
var black = document.getElementById("black");
var ShirtDescrp = document.getElementById("des");
var userPickColor = null;

white.addEventListener("click", whiteshirt);
black.addEventListener("click", blackshirt);

function whiteshirt() {

  userPickColor = "white";
  ShirtDescrp.innerHTML = userPickColor;
}

function blackshirt() {
  userPickColor = "black";
  ShirtDescrp.innerHTML = userPickColor;
}
<button id="white">white</button>
<button id="black">black</button>

<p id="des"></p>
0
G.aziz 30 oct. 2019 a las 18:47

Tienes que poner ShirtDescrp.innerHTML = userPickColor; dentro de tu escucha de eventos también, ya que cambias la variable pero no le dijiste al dom que actualice el contenido

1
Potato 30 oct. 2019 a las 18:42