Button functionality

[Aitlol]

Hi, im new to javascript and i got a problem i hope i can get some help with, I got an simple website where i got two input fields that i want to put only numbers in and i created a numpad with buttons for 1-9, I want the selected input field to recieve the info from my button presses. right now i only get it to work by setting the specific field inside my code but i want to be able to choose wich field to fill when i click it…

html input fields

        <div class="form-control_deposit">
            
            <input type="number" class="form-control" id="deposit-input" placeholder="Deposit">
            <br>
            <button class="btn_1" id="deposit-btn">Submit</button>
        </div>

        <div class="form-control_withdraw">
            
            <input type="number" class="form-control" id="withdraw-input" placeholder="Withdraw">
            <br>
            <button class="btn_2" id="withdraw-btn">Submit</button>
            
        </div>
    </div> 

and here is the javascript

function ready() {

textField = document.getElementById("enter field here")

buttons = document.getElementsByClassName("btn_num")

Array.prototype.forEach.call (buttons, (button) => {
  button.addEventListener("click", () => {
    textField.value += button.innerText
  })
})

}

thanks in advance

[admit8490]

can you post the whole code? cause I am not sure where is the issue exactly.
one of them could be

@Aitlol

"enter field here"

this id with spaces, but I can’t see how this textField looks in HTML

[Aitlol]

That “enter field here” was just to show where i think the problem might be , if i put for example the id “withdraw-input” it will fill that field but i want to also be able to fill the “deposit-input” field.
I hope this make sence

[Aitlol]

here is the whole html code

    <div id="login-box" class="login-box">
        <h3>Login</h3>
        <input type="text" id="idname" class="form-control" placeholder="Personal ID">
        <br>
        <input type="text" id="password" class="form-control" placeholder="Password">
        <br>
        <button onclick="Login()" id="login" type="submit"  class="loginbtn" >Login</button>
        
        
    </div>
</div>

<div class="accounts" id="accounts">
    <div class="account1" id="accounts">
        <h1>Account 1</h1>
            <p>ID:Emil</p>
            <p>Password: 111</p>
        </div>
        <div class="account2" id="accounts">
        <H1>Account 2</H1>
            <p>ID:Maria</p>
            <p>Password: 222</p>
        </div>
    </div>
    
<div class="hidden" id="dashboard">

<div id="dashboard" class="dashboard">
    
        <div class="deposit">
            <h2>Total deposit</h2>
            <p class="">
                $ <span id="deposit">0</span>
            </p>
        </div>
        <div class="withdraw">
            <h2>Total withdraw</h2>
            <p class="">
                $ <span id="withdraw">0</span>
            </p>
        </div>
        <div class="balance">
            <h2>Your balance</h2>
            <p class="">
                $ <span id="balance">1000</span>
            </p>
        </div> 
    </div> 

   

    <div id="input-section" class="input_field">   

        <div class="form-control_deposit">
            
            <input type="number" class="form-control" id="deposit-input" placeholder="Deposit">
            <br>
            <button class="btn_1" id="deposit-btn">Submit</button>
        </div>

        <div class="form-control_withdraw">
            
            <input type="number" class="form-control" id="withdraw-input" placeholder="Withdraw">
            <br>
            <button class="btn_2" id="withdraw-btn">Submit</button>
            
        </div>
    </div> 

   


    
   <script src="bank.js"></script>

[admit8490]

I get it, you want numbers to go into particular element.

Implementation of that will depend:

in which cases number should go into ‘withdraw-input’?
in which cases number should go into ‘deposit-input’?

for example, we can add some button that will be like a switcher: if it is clicked all numbers will go into one input
if it clicked again - numbers will go into another input

but I assume you have own ideas how the whole thing should behave

[Aitlol]

I want to use a mouseclick to select the field i wanna input numbers on.

the idea of the website is a simple bank application where you can deposit and withdraw money back and forth

[admit8490]

@Aitlol

I want to use a mouseclick to select the field i wanna input numbers on.

you can add event listener for ‘onclick’ event to your inputs then

so the logic would be - if input is clicked, you can assign the clicked input to the ‘textField’ variable

thus, eventListeners for your num buttons will always know in which input those digits should go

[Aitlol]

isnt that what im doing here`?

Array.prototype.forEach.call (buttons, (button) => {
button.addEventListener(“click”, () => {
textField.value += button.innerText
})
})

[admit8490]

this is event listeners for the buttons

I was talking about new event listeners, for the inputs

If you want some stuff happening, depending on mouseclick on the input element, you should add eventListener to the input element

in this case ‘stuff happenning’ means

@Aitlol

to use a mouseclick to select the field i wanna input numbers on.

[Aitlol]

I see, I just dont know how to make it work, sorry im really new to this

[admit8490]

no worries, I get it.

in your code you already added event listeners to all buttons with class btn_num

both of your inputs have class ‘form-control’

so you can use similar approach to add event listeners to the inputs

EDIT. that will actually not fully work in your case, because you have four inputs with class form-control

[admit8490]

@admit8490

EDIT. that will actually not fully work in your case, because you have four inputs with class form-control

but it can be easily fixed, for example, we can add second class to the desired inputs:

 <input type="number" class="form-control num-field" id="deposit-input" placeholder="Deposit">
            <br>
            <button class="btn_1" id="deposit-btn">Submit</button>
        </div>

        <div class="form-control_withdraw">
            
            <input type="number" class="form-control num-field" id="withdraw-input" placeholder="Withdraw">
            <br>
            <button class="btn_2" id="withdraw-btn">Submit</button>

then in .js file we can say:

inputs = document.getElementsByClassName("num-field")

and then we can attach listeners to the inputs just like you did

Array.prototype.forEach.call (inputs, (input) => {
  input.addEventListener("click", () => {
    console.log('I was clicked')
  })
})

my version of listener will just print stuff into the console, but for your purposes you can add some logic instead of console.log('I was clicked') this stuff

[Aitlol]

something like this?

function ready() {

textField = document.getElementsByClassName("form-control num-field")

buttons = document.getElementsByClassName("btn_num")
inputs = document.getElementsByClassName("num-field")

Array.prototype.forEach.call (buttons, (button) => {
  button.addEventListener("click", () => {
    textField.value += button.innerText
  })
  Array.prototype.forEach.call (inputs, (input) => {
    input.addEventListener("click", () => {
      console.log('I was clicked')
    })
  })
})

[admit8490]

more or less, but I don’t think you need to place

@Aitlol

 Array.prototype.forEach.call (inputs, (input) => {
    input.addEventListener("click", () => {
      console.log('I was clicked')
    })
  })

the above inside of another forEach

and you can get rid of this:

@Aitlol

textField = document.getElementsByClassName("form-control num-field")

you can just replace it with let textField; we can use this variable, but we do not need to assign stuff to it when declaring

[admit8490]

After all that, now I suggest to slightly modify the new code, add event parameter like below, and I also added some console.log:

Array.prototype.forEach.call (inputs, (input) => {
  input.addEventListener("click", (event) => {
    console.log(event)
    console.log(event.target)

  })
})

see what it will print in the console, do some research about event, and I think you will get an idea how to use it.

[Aitlol]

I get this error
bank.js:100 Uncaught TypeError: Cannot read properties of undefined (reading ‘value’)
at HTMLInputElement. (bank.js:100:9)

[admit8490]

ah, yeah, good point. That’s because we modified textField.

@Aitlol

textField.value += button.innerText

this line is broken for now, but that is temporarily.

The idea is - to actually assign some stuff to textField variable on the input click. For that you need to add some logic here:

@admit8490

input.addEventListener("click", (event) => {
    console.log(event)
    console.log(event.target)
   // some code should be placed here
  })

[Aitlol]

I will watch some youtube videos explaining events and hope i understand it more

[admit8490]

I would recommend this one, for what you are trying to achieve with this code

JavaScript DOM Manipulation – Full Course for Beginners

[Aitlol]

I guess im just stupid because i still dont know what code i should put under the click event listener to make everything work