堆栈内存溢出
  简体   繁体   English

在内部文本中显示数字的问题

[英]Problem with displaying number in inner text

 原文  2022-08-09 17:07:56  6   1    javascript/ html/ css

问题描述

newbie here...新手来了...

I am working on some simple project where I am trying to simulate bank app.我正在做一些简单的项目，我正在尝试模拟银行应用程序。

Thing is that when I click on send money button, I want to take value from input value, and then subtract this value from my whole account balance.事情是当我点击汇款按钮时，我想从输入值中获取价值，然后从我的整个账户余额中减去这个值。

Really simple, but after first transaction I get value which I want, but after second time I get innerText displaying "Nan" instead of some number value.真的很简单，但是在第一次交易之后我得到了我想要的价值，但是在第二次之后我得到了 innerText 显示“Nan”而不是一些数值。

Here it is javascript file, if you can see from this why I get error.这里是 javascript 文件，如果你能从中看出为什么我会出错。 Also here it is html and css if you don't understand what I am talking about.如果你不明白我在说什么，这里还有 html 和 css。

    ////////////////// TOTAL MONEY FROM CARDS ///////////////////////
const totalMoney = document.querySelector(`.totalMoney`);
const allcards = document.querySelectorAll(`.cards`);
let totalMoneyAccount = 0;

allcards.forEach((kartica) => {
  let novacNaKartici = kartica.querySelector(`.novacNaKartici`).innerText;
  novacNaKartici = parseInt(novacNaKartici);
  totalMoneyAccount += novacNaKartici;
  totalMoney.innerText = ` ${replika2} $`;
});

//////////////////////////// TRANSFER MONEY TO SOMEONE /////////////////////////////
const reciver = document.querySelector(`input[name='recivier']`);
let amount = document.querySelector(`input[name='amount']`);
const sendMoneyBtn = document.querySelector(`.sendBtn`);
const transakcijeParent = document.querySelector(`.transakcije`);

sendMoneyBtn.addEventListener(`click`, () => {
  amount = parseInt(amount.value);
  totalMoneyAccount = totalMoneyAccount - amount;

  updateProfile(totalMoneyAccount);
});

function updateProfile(totalMoneyAccount) {
  totalMoney.innerHTML = totalMoneyAccount;
}


<!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" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Bank app</title>
  </head>
  <body>
    <div class="container">
      <div class="profile">
        <div class="header">
          <span class="material-symbols-outlined"> notifications </span>
          <span class="material-symbols-outlined"> search </span>
        </div>
        <div class="person">
          <img src="/img/cost1.jpg" alt="" />
          <p>Random user</p>
          <span class="totalMoney" style="font-size: 20px;"></span>
        </div>
        <div class="menu">
          <div class="account flex">
            <span class="material-symbols-outlined"> manage_accounts </span>
            <p>Accounts</p>
          </div>
          <div class="transactions flex">
            <span class="material-symbols-outlined"> receipt_long </span>
            <p>Transactions</p>
          </div>
          <div class="bonus flex">
            <span class="material-symbols-outlined"> star </span>
            <p>Bonus</p>
          </div>
          <div class="invest flex">
            <span class="material-symbols-outlined"> trending_up </span>
            <p>Investments</p>
          </div>
          <div class="logOut flex">
            <span class="material-symbols-outlined"> logout </span>
            <p>Log Out</p>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="left">
          <div class="naslov">
            <p>Cards</p>
            <span class="material-symbols-outlined">
                add_circle
            </span>
          </div>
          <div class="allCards">
              <div class="cards changeJustify">
                <div class="singleCard">
                  <img src="/img/visa.png" alt="" class="changeImg"/>
                </div>
                <div class="opis">
                    <p style="color: grey; font-size:20px">VISA</p>
                    <p style="color: black; font-size:16px" class="balance1 changeBalance">Balance:</p>
                </div>
                <div class="balance">
                    <span class="material-symbols-outlined  changeSpan dots">
                        more_vert
                    </span>
                    <span style="font-size: 22px; color:grey(59, 59, 59);" class="novacNaKartici">2500$</span>
                </div>
            </div>
            
            <div class="cards changeJustify">
                <div class="singleCard ">
                  <img src="/img/american.jpg" alt="" class="changeImg"/>
                </div>
                <div class="opis ">
                    <p style="color: grey; font-size:20px">VISA</p>
                    <p style="color: grey; font-size:16px" class="balance1 changeBalance">Balance:</p>
                </div>
                <div class="balance ">
                    <span class="material-symbols-outlined changeSpan dots" >
                        more_vert
                    </span>
                    <span style="font-size: 22px; color:black;" class="novacNaKartici">3500$</span>
                </div>
              </div>
            
          </div>
          <p style="font-size: 30px;
          color: grey;
          font-weight: bold;">Transactions</p>
          <div class="transakcije">
                        
          </div>
          </div>
        </div>
        <div class="right">
          <p style="font-size: 30px;
          color: grey;
          font-weight: bold;">Transfer money</p>
          <div class="transfer">
            <label for="recivier">Transfer to</label>
            <input type="text" placeholder="antonio3101" name="recivier">
            <label for="amount">Amount</label>
            <input type="number" placeholder="$300..." name="amount">
            <button class="sendBtn">Send</button>
          </div>

        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background-color: #f1f2f6;
}

.profile {
  height: 100vh;
  width: 20%;
  background-color: #1d1c57;
  display: flex;
  flex-direction: column;
  color: white;
}

.profile .header {
  display: flex;
  padding: 30px;
  align-items: center;
  justify-content: space-between;
  color: #7979a6;
}

.profile .header span {
  font-size: 26px;
}

.profile .header span:hover {
  color: white;
}

.profile .person {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile .person img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.profile .person p {
  font-size: 26px;
  color: #c6c5d8;
}

.profile .menu {
  margin-top: 100px;
  padding: 20px;
  background-color: #262467;
  border-radius: 30px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  height: 100%;
  position: relative;
  font-size: 22px;
  color: #7c7eaa;
}

.profile .flex {
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile .flex:hover {
  margin-left: 40px;
  color: white;
  transition: ease-in-out;
}

.logOut {
  position: absolute;
  bottom: 50px;
}

/*-------------------------- KARTICE ----------------------------------------- */

.main .naslov {
  color: grey;
  font-size: 30px;
  font-weight: bold;
}

.naslov {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.naslov span {
  font-size: 32px;
}

.naslov span:hover {
  color: black;
}

.main .left {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
}

.main .left .cards {
  background-color: #ffffff;
  padding: 20px;
  display: flex;
  padding: 20px;
  border-radius: 20px;
}

.cards {
  margin-top: 10px;
}

.cards .singleCard {
  display: flex;
  width: 100%;
}

.allCards {
  display: flex;
  flex-direction: column;
}

.cards .singleCard img {
  width: 250px;
  padding-right: 10px;
}

.cards .opis p {
  margin: 0;
  padding: 0;
  margin-left: 10px;
}

.cards .opis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.cards .balance {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/*------------------------------- CHANGE CARD -------------------------------- */

.changeImg {
  height: 50px;
  object-fit: cover;
}

.changeSpan {
  display: none;
}

.changeJustify {
  display: flex;
  align-items: center;
}

.changeBalance {
  display: none;
}

/*-------------------------- TRANSAKCIJE ----------------------------------------- */
.transakcije {
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.single-transaction {
  display: flex;
  margin-left: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid grey;
}

.single-transaction img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.single-transaction .destination {
  font-size: 16px;
  color: rgb(73, 73, 73);
  font-weight: bold;
}

.single-transaction .amount {
  color: rgb(30, 149, 30);
  font-weight: bold;
  font-size: 16px;
}

.single-transaction:last-child {
  border-bottom: 0;
}

/*-------------------------- RIGHT SECTIONS ----------------------------------------- */

/*-------------------------- TRANSFER MONEY ----------------------------------------- */

.right {
  display: flex;
  flex-direction: column;
  margin-left: 100px;
}

.right .transfer {
  background-color: #1d1c57;
  padding: 50px 20px;
  border-radius: 10px;
  margin-left: 10px;
  margin-right: 20px;
}

.right .transfer input {
  height: 30px;
  font: 24px;
  margin-left: 10px;
}

.right .transfer label {
  margin-left: 20px;
  color: white;
}

.right .transfer button {
  padding: 10px 15px;
  color: black;
  background-color: white;
  border-radius: 5px;
  border: 0;
  margin-left: 20px;
  margin-right: 20px;
}

1 个解决方案

解决方案1
 1  2022-08-09 17:41:49

You are overwriting your amount variable (which points to an input element) with the value inputted into said input.您正在用输入到所述输入中的值覆盖您的amount变量（指向输入元素）。 Hence, after the first click you no longer have a reference to the input element: your code tries to read the value property of the integer amount of the last transaction.因此，在第一次单击后，您不再有对输入元素的引用：您的代码尝试读取最后一笔交易的 integer 金额的value属性。 This results in the following evaluation: parseInt(amount.value) -> parseInt(undefined) -> NaN .这将导致以下评估： parseInt(amount.value) -> parseInt(undefined) -> NaN 。

Change this code:更改此代码：

sendMoneyBtn.addEventListener(`click`, () => {
  amount = parseInt(amount.value);
  totalMoneyAccount = totalMoneyAccount - amount;

  updateProfile(totalMoneyAccount);
});

to something like this:像这样：

sendMoneyBtn.addEventListener(`click`, () => {
  const amountValue = parseInt(amount.value);
  totalMoneyAccount = totalMoneyAccount - amountValue;

  updateProfile(totalMoneyAccount);
});

Credit to @JohnnyMopp for noticing it first.感谢@JohnnyMopp 首先注意到它。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在一行中显示电话号码的jsx问题 - jsx problem displaying a phone number in one line 如何将内部 Div 文本转换为数字？ - How do I convert the inner Div text in number? 显示内部表单元素 - Displaying inner forms elements d3.js 悬停在地图上不显示文本框，css 问题 - d3.js hover on map not displaying text box, css problem Plotly js图表悬停文本不显示正确的数字值 - Plotly js chart hover text not displaying correct number values 根据用户从下拉列表中的选择显示许多文本框 - Displaying a number of text boxes based on user selection from dropdown 内部子子菜单不显示 - Inner sub sub menus is not displaying 通过javascript onkeypress问题在文本框中仅输入数字 - Enter only number in text box by javascript onkeypress problem 无论嵌套元素的数量多少，都可以使用javascript（jquery）查找最内层文本并替换它 - Find the inner most text with javascript (jquery) regardless of number of nested elements and replace it 在使用pyfacebook显示xfbml时出现问题 - Problem displaying xfbml with pyfacebook
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM