在对象变量中输入属性时需要帮助

Question

我想在输入框中这样做，当它被输入时，值被分配给对象变量中的属性。例如:如果输入180的权重，则会将值180指定给该权重。也不确定如何显示键和值。现在我有它，所以它在控制台中。

我当前的代码是

​

var basketballplayers = {
  weight: "",
  height: "",
  wins: "",
  losses: "",
};

document.getElementById('number').addEventListener('keyup', function(e) {
  if (e.keyCode == 13) {
    let pikachu = this.value;
    console.log(pikachu);
    document.getElementById("charzard").innerHTML = pikachu;
  }
});

document.getElementById('number1').addEventListener('keyup', function(e) {
  if (e.keyCode == 13) {
    let pikachu1 = this.value;
    console.log(pikachu1);
    document.getElementById("charzard1").innerHTML = pikachu1;

  }
});

document.getElementById('number2').addEventListener('keyup', function(e) {
  if (e.keyCode == 13) {
    let pikachu2 = this.value;
    console.log(pikachu2);
    document.getElementById("charzard2").innerHTML = pikachu2;

  }
});

document.getElementById('number3').addEventListener('keyup', function(e) {
  if (e.keyCode == 13) {
    let pikachu3 = this.value;
    console.log(pikachu3);
    document.getElementById("charzard3").innerHTML = pikachu3;

  }
});









for (let [key, value] of Object.entries(basketballplayers)) {
  console.log(`${key}: ${value}`);
}

<h1>Basketball Players</h1>
<p id="zip"></p>

<p>Weight:</p><input type="number" id="number" />
<p id="charzard"></p>
<p>Height:</p><input type="number" id="number1" />
<p id="charzard1"></p>
<p>Wins:</p><input type="number" id="number2" />
<p id="charzard2"></p>
<p>Losses:</p><input type="number" id="number3" />
<p id="charzard3"></p>

​

Answer 1

您可以对每个输入执行以下操作。例如:将输入权重值分配给对象属性

basketballplayers.weight = pikachu

下面是每个输入字段

var basketballplayers = {
    weight: "",
    height: "",
    wins: "",
    losses: "",
};

document.getElementById('number').addEventListener('keyup', function(e) {
      if (e.keyCode == 13) {
          let pikachu = this.value;
          console.log(pikachu);
          basketballplayers.weight = pikachu;
          document.getElementById("charzard").innerHTML = pikachu;
      }
});

document.getElementById('number1').addEventListener('keyup', function(e) {
    if (e.keyCode == 13) {
        let pikachu1 = this.value;
        console.log(pikachu1);
        basketballplayers.height = pikachu1;
        document.getElementById("charzard1").innerHTML = pikachu1;
    }
});

document.getElementById('number2').addEventListener('keyup', function(e) {
    if (e.keyCode == 13) {
         let pikachu2 = this.value;
         console.log(pikachu2);
         basketballplayers.wins = pikachu2;
         document.getElementById("charzard2").innerHTML = pikachu2;
    }
});

document.getElementById('number3').addEventListener('keyup', function(e) {
    if (e.keyCode == 13) {
        let pikachu3 = this.value;
        console.log(pikachu3);
        basketballplayers.Losses = pikachu3;
        document.getElementById("charzard3").innerHTML = pikachu3;
    }
});

Answer 2

为pikachu1、2、3赋值后，可以立即修改对象。

basketballplayers = {...basketballplayers, weight: pikachu}

Answer 3

只需更新basketballplayers对象，而不是段落的innerHTML：

​

var basketballplayers = {
  weight: "",
  height: "",
  wins: "",
  losses: "",
};

document.getElementById('number').addEventListener('keyup', function(e) {
  if (e.keyCode == 13) {
    basketballplayers.weight = this.value;
    console.log(basketballplayers);
  }
});

document.getElementById('number1').addEventListener('keyup', function(e) {
  if (e.keyCode == 13) {
    basketballplayers.height = this.value;
    console.log(basketballplayers);
  }
});

document.getElementById('number2').addEventListener('keyup', function(e) {
  if (e.keyCode == 13) {
    basketballplayers.wins = this.value;
    console.log(basketballplayers);
  }
});

document.getElementById('number3').addEventListener('keyup', function(e) {
  if (e.keyCode == 13) {
    basketballplayers.losses = this.value;
    console.log(basketballplayers);
  }
});

<h1>Basketball Players</h1>
<p id="zip"></p>

<p>Weight:</p><input type="number" id="number" />
<p id="charzard"></p>
<p>Height:</p><input type="number" id="number1" />
<p id="charzard1"></p>
<p>Wins:</p><input type="number" id="number2" />
<p id="charzard2"></p>
<p>Losses:</p><input type="number" id="number3" />
<p id="charzard3"></p>

​