Reverse() is not working and so does unshift() in vanilla javascript-CodePudding

The issue is only there when I'm trying to reverse the user input, reverse() is returning the string as it is and so does the unshift().

what I'm looking for is if the user enters input - 1234 the output should be 4,3,2,1, but I'm getting is output - 1,2,3,4.

const pahere = [];
const revephare = [];
let donereve = [];
let dff = document.getElementById("Udt1");

function tex(){
  if(dff. value == "") {
    console.log("enter text")
  }
  else {
    pahere.push(dff.value);
    console.log(dff.value);
    console.log(pahere);
    console.log(pahere.length);
    for(let i = 0; i < pahere.length; i  ){
      revephare.push(pahere[i].split(""));
      pahere.pop();
    }
  }
  console.log("I should be splited",revephare);
  donereve = revephare.reverse();
  console.log("I should be reversed",donereve);
}

* {
    box-sizing: border-box;
}
body{
    background: #333;
    margin: 0;
}

h1{
    margin: 15px;
    color: white;
}
.holder{
    margin-left: 12px;
    width: 34em;
    height: 37em;
    border: 2px solid rgba(255, 51, 153,1);
    display: flex;
}

#Udt1 {
    width: 56%;
    height: 2em!important;
    text-align: center;
}

span {
    color: white;
    margin-top: 5px;
}

.anshold {
    width: 154px;
    height: 34px;
    margin-left: 43em;
    position: relative;
    top: -592px !important;
    border: 2px solid rgba(255, 51, 153,1);
    text-align: center;
}

#udans{
    color: white;
    text-align: center;
    margin: 0;
    padding: 4px;
}

.btn {
    width: 16%;
    height: 2em!important;
    text-align: center;
    margin-left: 14px;
}

<body>
    <h1>Palidrom Checker</h1>
    <div >
        <span>Word goes here-</span>
        <input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
        <button  onclick="tex()"> Check</button>
    </div>
    
    <div ><p id="udans">  </p>
    </div>
</body>

CodePudding user response：

Your trying to spliting Array pahere[i].split("")

const pahere = [];
const revephare = [];
let donereve = [];
let dff = document.getElementById("Udt1");

function tex(){
  if(dff. value == "") {
    console.log("enter text")
  }
  else {
    pahere.push(dff.value);
    console.log(dff.value);
    console.log(pahere);
    console.log(pahere.length);
    for(let i = 0; i <dff.value.length; i  ){
      revephare.push(dff.value[i]);
      pahere.pop();
    }
  }
  console.log("I should be splited",revephare);
  donereve = revephare.reverse();
  console.log("I should be reversed",donereve);
}

* {
    box-sizing: border-box;
}
body{
    background: #333;
    margin: 0;
}

h1{
    margin: 15px;
    color: white;
}
.holder{
    margin-left: 12px;
    width: 34em;
    height: 37em;
    border: 2px solid rgba(255, 51, 153,1);
    display: flex;
}

#Udt1 {
    width: 56%;
    height: 2em!important;
    text-align: center;
}

span {
    color: white;
    margin-top: 5px;
}

.anshold {
    width: 154px;
    height: 34px;
    margin-left: 43em;
    position: relative;
    top: -592px !important;
    border: 2px solid rgba(255, 51, 153,1);
    text-align: center;
}

#udans{
    color: white;
    text-align: center;
    margin: 0;
    padding: 4px;
}

.btn {
    width: 16%;
    height: 2em!important;
    text-align: center;
    margin-left: 14px;
}

<body>
    <h1>Palidrom Checker</h1>
    <div >
        <span>Word goes here-</span>
        <input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
        <button  onclick="tex()"> Check</button>
    </div>
    
    <div ><p id="udans">  </p>
    </div>
</body>

CodePudding user response：

This is because you're using Array.prototype.push incorrectly which gives you an array of arrays as a result

revephare.push(pahere[i].split("")); // this line is incorrect

Replace it by the following to make it work

// use spread operator to pass each element as a separate argument
revephare.push(...pahere[i].split(""));

CodePudding user response：

Hi i know you fixed the issue, you can achieve your output by this single line code, just try if you can

let reversed=(pahere.toString()).split("").map(Number).reverse();