需要帮助将属性输入到对象变量中答案

【问题标题】：Need help inputting properties into object variable需要帮助将属性输入到对象变量中
【发布时间】：2019-12-10 04:12:18
【问题描述】：

我想在输入框中这样，当它输入时，值被分配给对象变量中的属性。例如：如果您为重量输入 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>

【问题讨论】：

标签： javascript object properties key

【解决方案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;
    }
});

【讨论】：

【解决方案2】：

在为 pikachu1,2,3 赋值之后。您可以立即修改对象。

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

【讨论】：

【解决方案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>

【讨论】：