CODEWITHSUNDEEP
javascripthtmlarrays
coddein
coddein

Reputation: 33

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

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>

Upvotes: 0

Views: 37

Answers (3)

Joshi G
Joshi G

Reputation: 523

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

Upvotes: 1

Dzianis Roi
Dzianis Roi

Reputation: 925

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

Upvotes: 1

Ravi Makwana
Ravi Makwana

Reputation: 2916

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>

Upvotes: 1

Related Questions