Why doesn't my element update during the else part but during the if part?

Leo Maiorini 0
Viewed 39

I'm making a program where it has a collection of calculators, and for some reason when I try to change the innerhtml of a certain text it only changes it during the if statement and not during the else part.

function Palindrome() {
//Fix not changing to processing when doing new palindrome.
var Division = 0;
var input = document.getElementById("PalindromeInput").value;
var GiveAnswer = document.getElementById("PalindromeAnswer");
var Answer = String(input);

while (0 < 1) {
    if (Answer == Answer.split("").reverse().join("")) {
        GiveAnswer.innerHTML = `That is a palindrome of the ${Division}th Division.`;
        break
    } else {
        GiveAnswer.innerHTML = `Processing...`;
        Division = Division + 1;
        Answer = String(parseInt(String(Answer)) + parseInt(Answer.split("").reverse().join("")));
        };
};

};

https://replit.com/@ButterDoesFly/Arcane-Calculators#index.html

javascript
2 Answers

I'm not sure but I guess the reason for this is that the function never goes to the else part because it gets break every time. Remember that .reverse() reverses the array in place so the if statement will always be true. Try to add different variable for the reversed answer.

Kuba Nowoszyński0 

function Palindrome() {
    //Fix not changing to processing when doing new palindrome.
    var Division = 0;
    var input = document.getElementById("PalindromeInput").value;
    var GiveAnswer = document.getElementById("PalindromeAnswer");
    var Answer = String(input);

  GiveAnswer.innerHTML = `Processing...`;
  setTimeout(()=>{
    while (0 < 1) {
        if (Answer == Answer.split("").reverse().join("")) {
            GiveAnswer.innerHTML = `That is a palindrome of the ${Division}th Division.`;
            break
        } else {
      Division = Division + 1;
            Answer = String(parseInt(String(Answer)) + parseInt(Answer.split("").reverse().join("")));
            };
    };
  },1000)
};
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <p id="PalindromeAnswer">This will tell you the number its at and then the answer.</p>
  <input type="text" id="PalindromeInput" placeholder="What number would you like to enter?">
  <br>
  <input type="button" onclick="Palindrome()" value="Submit" id="PalindromeButton">
  <script src="script.js"></script>

  <!--
  This script places a badge on your repl's full-browser view back to your repl's cover
  page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
  teal, blue, blurple, magenta, pink!
  -->
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>

</html>

result is rendering very fast such that changes are not reflecting in ui..add a timeout so that changes reflect in front end

Mrudhula Katta0
Related