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

May 19, 2022

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 class="holder">
        <span>Word goes here-</span>
        <input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
        <button class="btn" onclick="tex()"> Check</button>
    </div>
    
    <div class="anshold"><p id="udans">  </p>
    </div>
</body>

>Solution :

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 class="holder">
        <span>Word goes here-</span>
        <input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
        <button class="btn" onclick="tex()"> Check</button>
    </div>
    
    <div class="anshold"><p id="udans">  </p>
    </div>
</body>