How to add value to input by clicking on another input-CodePudding

I have a problem with my project. What I am trying to do is basically an ATM. But I have a problem with adding a value to an input, by clicking on another input/button like in a real ATM. Can someone explain how it should be done?

Here is my code:

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>ATM</title>
</head>
<body>
Please enter your pin:
<form action="/script2.js" method="get">
   <input type="password" name="pin" pattern="[0-9]{4}" maxlength="4" id="pin" value="">
   <input type="button" value="1"  onclick="add(this.value)">
   <input type="submit" value="Validate">
</form>



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

and JS: 

const pinPassword = document.getElementById('pin').value;

function add(x){
   pinPassword.value = x;
}

CodePudding user response：

 let pin = document.getElementById('pin');


        function add(x) {
            if (pin.value.length <= 3) {
                pin.value  = x;
            }
        }

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ATM</title>
</head>

<body>
    Please enter your pin:
    <input type="password" name="pin" pattern="[0-9]{4}" maxlength="4" id="pin" value="">
    <input type="button" value="1" id="one" onclick="add(this.value)">


 
</body>

</html>

i come up with this, I'm just a beginner so i don't know if this is the best solution

CodePudding user response：

you can use addEventListenr on you element and get the value from event

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>ATM</title>
</head>
<body>
Please enter your pin:
<form action="/script2.js" method="get">
   <input type="password" name="pin" pattern="[0-9]{4}" maxlength="4" id="pin" value="">
   <input type="button" value="1">
   <input type="submit" value="Validate">
</form>



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

    const inputOne = document.getElementById("one");
    const pinPassword = document.getElementById("pin");

    inputOne.addEventListener("click", (e) => {
      pinPassword.value = e.target.value;
    });
  </script>

CodePudding user response：

You need to get value from button and add in textbox.

var textValue = '';
var err = document.getElementById('errMessage');
function add(value) {
    var txt = document.getElementById('pin');
    if(txt.value.length < 4)
    {
        textValue  = value;
        txt.value = textValue;
    }
    else
    {
        err.innerHTML = "Limit is 4";
    }
    
 }

<input type="password" pattern="[0-9]{4}" maxlength="4" size="4" id="pin" value="" style="width: 200px">
<br>
<span id="errMessage"></span>
<br><br>
<input type="button" value="1" onclick="add(this.value)">
<input type="button" value="2" onclick="add(this.value)">
<input type="button" value="3" onclick="add(this.value)">
<br><br>
<input type="button" value="4" onclick="add(this.value)">
<input type="button" value="5" onclick="add(this.value)">
<input type="button" value="6" onclick="add(this.value)">
<br><br>
<input type="button" value="7" onclick="add(this.value)">
<input type="button" value="8" onclick="add(this.value)">
<input type="button" value="9" onclick="add(this.value)">
<br><br>
<input style="margin-left: 30px" type="button" value="0" onclick="add(this.value)">

CodePudding user response：

What you can do is simply list this function and apply it on all your number buttons

<form action="/script2.js" method="get">
   <input type="password" name="pin" pattern="[0-9]{4}" maxlength="4" id="pin" value="">
   <input class="input-button" type="button" value="1"/>
<input class="input-button" type="button" value="2"/>
<input class="input-button" type="button" value="3"/>
<input class="input-button" type="button" value="4"/>
<input class="input-button" type="button" value="5"/>
<input class="input-button" type="button" value="6"/>
<input class="input-button" type="button" value="7"/>
<input class="input-button" type="button" value="8"/>
<input class="input-button" type="button" value="9"/>
<input class="input-button" type="button" value="0"/>
   <input type="submit" value="Validate">
</form>

const pinInputEl = document.getElementById('pin')
const buttonEls = document.querySelectorAll('.input-button') 

const touchToAdd = (buttonEl) => {
  buttonEl.addEventListener('click',()=> {
    pinPassword.value  = e.target.value
  })
}

buttonEls.forEach(buttonEl => touchToAdd(buttonEl))