时间戳

首页 > 解决方案 > 是否可以在单击按钮时动态更新 JavaScript 对象中的值？

javascript - 是否可以在单击按钮时动态更新 JavaScript 对象中的值？

问题描述

在 JavaScript 中，我创建了一个名为annualPlan.

当有人提交特定月份的 HTML 表单时，我希望能够更改对象中特定月份的值。

例如，如果有人提交 8 月 21 日和 200 日，我想pAug成为 500。

但是如果有人重新提交8月21日和500，我想pAug成为200。

下面的代码片段是我这样做的尝试（实际上它更像是尝试 100！）。

你怎么看？

var planMonth;
var planAmount;




//create a custom ID value with the current time of form submit
var today = new Date();
var FullDate = today.getDate() + "-" + (today.getMonth() + 1); //getMonth method starts from 0. Add 1 to get real month.
var time = today.getHours() + ":" + today.getMinutes();
var dateTime = FullDate + " " + time


var annualPlan = {
  pJan: 0,
  pFeb: 0,
  pMarch: 0,
  pApril: 0,
  pJune: 0,
  pJuly: 0,
  pAugust: 0,
  pSept: 0,
  pOct: 0,
  pNov: 0,
  pDec: 0,
};

const addPlan = function(ev) {

  ev.preventDefault();
  let planUpdate = {

    id: dateTime,
    Month: document.getElementById("PlanMonth").value,
    Amount: document.getElementById("PlanSave").value,
  }

  annualPlan.push(planUpdate);
  document.querySelector("form").reset();

  //console.log(annualPlan);
}

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById("button").addEventListener("click", addPlan);
});
/* PAGE STRUCTURE START */

body {
  padding-left: 150px;
  padding-right: 150px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 18px;
}

#inputarea {
  margin-top: 100px;
}

label {
  display: inline-block;
  padding-bottom: 8px;
  font-size: 22px;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

input {
  padding: 10px 20px;
  font-size: 18px;
  letter-spacing: 2px;
}

#formSection {
  padding-top: 30px;
}


/* PAGE STRUCTURE END */


/* FONT STYLING START */

#inputarea h3 {
  text-decoration: underline;
  color: #334058;
  font-size: 30px;
}


/* NAVIGATION AREA START */

* {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100, 50, 21, 6);
  transition-timing-function: cubic-bezier(100, 50, 21, 6);
  -moz-transition-property: all;
  -moz-transition-timing-function: cubic-bezier(100, 50, 21, 6);
}

.style-1 {
  text-align: center;
  margin-top: 40px;
}

.btn {
  color: #fff;
  background: #3399cc;
  padding: 20px 40px;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.btn:hover {
  border: none;
  background: rgba(0, 0, 0, 0.4);
  background: #fff;
  padding: 40px 40px;
  color: #334058;
}


/* NAVIGATION AREA END */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grow Your Wealth</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="images/fav.ico">

</head>
<!-- Navigation Start -->

<nav class="style-1">
  <a href="index.html" class="btn">Home</a>
  <a href="appPage.html" class="btn">App Page</a>
</nav>

<!-- Navigation End -->

<section id="inputarea">
  <h3 id="section-header">Plan Input Area</h3>

  <form onsubmit=>
    <div id="formSection">
      <label for="PlanMonth">Month</label><br>
      <input type="month" name="PlanMonth" id="PlanMonth" value="2021-08">
    </div>
    <div id="formSection">
      <label for="PlanSave">Planned Saving for Month</label><br>
      <input type="number" name="PlanSave" id="PlanSave" value="200"><br><br>
    </div>
    <div id="formSection">
    </div>
    <input type="submit" value="submit" id="button">
  </form>



</section>



<!-- JS File -->
<script src="js/app.js"></script>
</body>

</html>

标签： javascripthtmlcss

解决方案

我不确定您要做什么，但是此代码中的一些内容看起来不正确，希望这对您有所帮助。

<button onClick={doSomething}>My Button</button>

...

const data = {
  // values here
}

const doSomething = () => {
  data.example = // assign anything new here
}

推荐阅读