Question

0

150

Views

Changing a negatve number to a positive not working

I'm trying to take a user's input and check if it is positive or negative. If its negative I want to make it positive, if it's already positive I just want to leave it. Then I want to display it.

CSS:

h1, h2, textarea, button, div {
    display: flex;
    justify-content: center;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>
            <h1>Positive Converter</h1>
        </div>
        <br>
        <div>
            <h2 id="convertedNumberDisplay"></h2>
        </div>
    </div>
    <div>
        <div>
            <textarea id="txtnum"></textarea>
        </div>
        <div>
            <button onclick="convertTheNumber()">Convert to Positive</button>
        </div>
    </div>
</body>
</html>

Javascript:

var numbr = document.getElementById("txtnum").innerText;
var negNumbr = parseFloat(numbr) * -1
function convertTheNumber() {
    if (parseFloat(numbr) < 0) {
        document.getElementById("convertedNumberDisplay").innerText = parseFloat(negNumbr);
    } else {
         document.getElementById("convertedNumberDisplay").innerText = parseFloat(numbr);
    }
}

When I click the button to display the number, it displays NaN. I've tried some things such as changing function names to see if that helped. (I had a problem when naming a function click in another project) However, nothing did work. There are also no errors in the chrome inspect element debugging tool.

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

The textarea has a value property you should use, instead of innerText.

On top of that, you should only retrieve the value when clicking the button, so move that part into the convertTheNumber function.

        function convertTheNumber() {
            var numbr = document.getElementById("txtnum").value;
            var negNumbr = parseFloat(numbr) * -1
            if (parseFloat(numbr) < 0) {
                document.getElementById("convertedNumberDisplay").innerText = parseFloat(negNumbr);
            } else {
                document.getElementById("convertedNumberDisplay").innerText = parseFloat(numbr);
            }
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>
            <h1>Positive Converter</h1>
        </div>
        <br>
        <div>
            <h2 id="convertedNumberDisplay"></h2>
        </div>
    </div>
    <div>
        <div>
            <textarea id="txtnum"></textarea>
        </div>
        <div>
            <button onclick="convertTheNumber()">Convert to Positive</button>
        </div>
    </div>
</body>
</html>

about 4 years ago · Juan Pablo Isaza Report

0

You could simply use Math.abs instead

const txtnum = document.getElementById('txtnum'),
  convertedNumberDisplay = document.getElementById('convertedNumberDisplay');

function convertTheNumber() {
  const number = +txtnum.value;
  convertedNumberDisplay.textContent = isNaN(number) ? '' : Math.abs(number);
}

h1,
h2,
textarea,
button,
div {
  display: flex;
  justify-content: center;
}

<div>
  <div>
    <h1>Positive Converter</h1>
  </div>
  <div>
    <h2 id="convertedNumberDisplay"></h2>
  </div>
</div>
<div>
  <div>
    <textarea id="txtnum"></textarea>
  </div>
  <div>
    <button onclick="convertTheNumber()">Convert to Positive</button>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T06:36:36.258Z

In your javascript, your numbr (and negNumbr) variable is initialized immediately, not when the function is run.

Also: You read the innerText of the textarea, but you should use the textarea's value-property.

I've fixed both these issues below, and it now works.

function convertTheNumber() {
  var numbr = parseFloat(document.getElementById("txtnum").value);
  var negNumbr = -numbr
  if (parseFloat(numbr) < 0) {
    document.getElementById("convertedNumberDisplay").innerText = parseFloat(negNumbr);
  } else {
    document.getElementById("convertedNumberDisplay").innerText = parseFloat(numbr);
  }
}

h1, h2, textarea, button, div {
    display: flex;
    justify-content: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>
            <h1>Positive Converter</h1>
        </div>
        <br>
        <div>
            <h2 id="convertedNumberDisplay"></h2>
        </div>
    </div>
    <div>
        <div>
            <textarea id="txtnum"></textarea>
        </div>
        <div>
            <button onclick="convertTheNumber()">Convert to Positive</button>
        </div>
    </div>
</body>
</html>

I'd like to add a slightly "optimized" or shortened version.

function showAbsoluteValue() {
  const absoluteValue = Math.abs( parseFloat( document.getElementById("txtnum").value ) )
  document.getElementById("convertedNumberDisplay").innerText = absoluteValue;
}

<h1>Absolute value: <span id="convertedNumberDisplay"></span></h1>
<textarea id="txtnum"></textarea>
<button onclick="showAbsoluteValue()">Show absolute value</button>

0

150

Changing a negatve number to a positive not working

3 answers

0

0

I'd like to add a slightly "optimized" or shortened version.

0

Find remote jobs

Andres GPT