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()}```
     
  

Answer 1

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>

Answer 2

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>

Answer 3

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));