Pad a number with leading zeros

Question

I am not able to link functions to pad a 4 number with leading zeros. need help here.

<h2 id = 'fourDGenerator'>0000</h2>
<button id = 'ButtonReset' onclick="clickToReset()">RESET</button>     
<button id = 'Button4D' onclick="clickToGenerate()">GENERATE 4D NUMBER</button>   
<script src="script.js"></script>

const Button4D = document.getElementById('fourDGenerator')

let randomNumber = getRandomNumber();
function clickToGenerate (){Button4D.innerText = randomNumber}
function getRandomNumber(){eturn Math.floor(Math.random()*10000);}

let padTo4Numbers = getRandomNumber 
function padTo4Numbers() {('0000'+ getRandomNumber).slice(-4);}

function clickToReset () {location.reload()}```

the padding seems partially correct to me stategy wise...but there are syntatic errors everywhere. you set the variable randomNumber and then you call again getRandomNumber to set this time padTo4Number.. but you don't pass it to the padTo4Numbers function. Inside the function you concateneate the leading zeros to the function variable. And in general you use the global scope from functions instead of passing arguments. I suggest you to better read the javascript console to understand the errors in detail — Diego D, Jul 06 '22 at 06:37
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart — mgm793, Jul 06 '22 at 06:38
`let randomNumber = getRandomNumber();` calculates *one* random number and assignes it to your variable. You never call padTo4Numbers — Hans Keﬆing, Jul 06 '22 at 06:38
Is `{eturn Math....` just a typo here on SO, or is that your real code? — Don't Panic, Jul 06 '22 at 07:05

score 0 · Answer 1 · answered Jul 06 '22 at 06:47

You need to get the functions to returns some value after changing some value.

For padding a number, you could take a string method to change the value and omit slicing later.

function clickToGenerate() {
    button4D.innerText = padTo4Numbers(getRandomNumber());
}

function getRandomNumber() {
    return Math.floor(Math.random() * 10000);
}

function padTo4Numbers(value) {
    return value.toString().padStart(4, 0);
}

function clickToReset() {
     button4D.innerText = '____';
}

const button4D = document.getElementById('fourDGenerator');

<h2 id="fourDGenerator">____</h2>
<button id="ButtonReset" onclick="clickToReset()">RESET</button>
<button id="Button4D"' onclick="clickToGenerate()">GENERATE 4D NUMBER</button>

score 0 · Answer 2 · answered Jul 06 '22 at 06:48

This is a semplified demo with some errors solved from your code:

function getRandomNumber(){
  return Math.floor(Math.random()*10000);
}

function padTo4Numbers(n){
  return ('0000'+ n).slice(-4);
}

function generate(){
  const randomNumber = getRandomNumber();
  const padded = padTo4Numbers(randomNumber);
  document.querySelector('#target').innerText = padded;
}

#container{
  width: 10rem;
}

#target{
  border: solid 2px gray;
  height: 3rem;
  font-size: 3rem;
  text-align: center;
}

button{
  cursor: pointer;
}

<div id="container">
  <div id="target"></div>
  <button onclick="generate();">Generate Random Number</button>
</div>

score 0 · Answer 3 · answered Jul 06 '22 at 06:56

You seem to have implemented the solution from How can I pad a value with leading zeros?:

let n = 1
var padded = ('0000'+n).slice(-4);
console.log(padded)

What about fixing towards a minimal reproducible example:

function getRandomNumber() {
  return Math.floor(Math.random()* 10000);  // will it ever become less than 4 digits?
}

function padTo4Digits(n) { // renamed and parameterised 
  return ('0000'+n).slice(-4);  // add return
}

// use both
let n = getRandomNumber(); 
console.log('random', n);
console.log('padded', padTo4Digits(n));

// real test
console.log('padded test', padTo4Digits(23));

Pad a number with leading zeros

3 Answers3