What is the problem in this code?

Question

1.00/5 (2 votes)

See more:

Hello everyone! this is an code for a rectangle area and square area calculator! and I wrote it with HTML and CSS and Java script .
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">
    <link rel="stylesheet" href="style.css">
    <title>Select List</title>
</head>

<body>
    <div class="main">
        <div class="entekhabkardan">
            <div id="porshode">
                <p>Select Witch Shape You want</p>

                <button id="rectangleCal">Rectangle Calculation</button>
                <br>
                <button id="squareCal">Square Calculation</button>




            </div>
            <form id="rectangleForm"><label for="rectangleLengthLabel">Length:</label>
                <input type="text" class="rectangleLenghtInput" id="rectangleLenghtInput">
                <br>

                <label for="rectangleWidthCalLabel">Width:</label>
                <input type="text" class="rectangleWidthCalInput" id="rectangleWidthCalInput">
                <br>
                <br>
                <button id="rectangleCalBtn">Calculate!</button>
                <br>
                <br>
                Answer:<div id="rectangleCalAns"></div>
            </form>
            <br>
            <br>
            <form id="squareForm"><label for="squareCalLabel">SquareSide:</label>
                <input type="text" id="squareSideInput" class="squareSideInput">
                <br>
                <br>
                <button id="squareCalBtn">Calculate!</button>
                <br>
                <br>
                Answer: <div id="squareCalAns"></div>
            </form>

        </div>
    </div>

    <script src="app.js"></script>
</body>

</html>

Js:

let RectangleForm = document.getElementById("rectangleForm");
let SquareForm = document.getElementById("squareForm");
RectangleForm.style.display = "none";
SquareForm.style.display = "none";
//---------------------------------------------------------------------RectangleCals
let rectangleCal = document.getElementById("rectangleCal");
let rectangleLengthInput = document.getElementById("rectangleLenghtInput");
let rectangleWidthInput = document.getElementById("rectangleWidthCalInput");
let rectangleCalBtn = document.getElementById("rectangleCalBtn");
let rectangleCalAnswer = document.getElementById("rectangleCalAns");
//---------------------------------------------------------------------SquareCals
let squareCal = document.getElementById("squareCal");
let squareside = document.getElementById("squareSideInput");
let squareCalBtn = document.getElementById("squareCalBtn");
let squareCalAns = document.getElementById("squareCalAns");
//---------------------------------------------------------------------ShowMachine
rectangleCal.addEventListener("click", function () {
  RectangleForm.style.display = "";
});
squareCal.addEventListener("click", function () {
  SquareForm.style.display = "";
});
//---------------------------------------------------------------------RectangleErrors
rectangleCalBtn.addEventListener("click", function () {
  console.log(rectangleWidthInput, rectangleLengthInput);
  if (!rectangleLengthInput.value || !rectangleWidthInput.value == none) {
    alert("The value of Length or Width is Empty");
  }
  //---------------------------------------------------------------------RectangleMachine
  else {
    rectangleCalAnswer.innerText = rectangleLengthInput * rectangleWidthInput;
  }
});
//---------------------------------------------------------------------SquareError
squareCalBtn.addEventListener("click", function () {
  if (!squareside.value == none) {
    alert("Please enter the value of square side!");
  }
  //---------------------------------------------------------------------SquareMachine
  else {
    squareCalAns.innerHTML = squareside * squareside;
  }
});

But the problem is: This code don't log the answer in Answer div

What I have tried:

Replacing else and ifs and even elements!

Posted 17-Jul-22 0:57am

SashaGamer 1993

Updated 18-Jul-22 4:51am

v2

Add a Solution

Comments

0x01AA 17-Jul-22 7:01am

Yes, what is the problem?
What do you expect and what do you get?

SashaGamer 1993 18-Jul-22 5:42am

Sorry i forgot but i updated the question and I really need help, can you help me now?

Dave Kreskowiak 17-Jul-22 12:33pm

You might want to start with asking questions is a skill - Google Search[^]

You haven't spelled out what's wrong with the functionality of this code. What is it expected to do? What is it actually doing?

Without answering those questions when you ask a question, it's impossible to tell you what's wrong.

SashaGamer 1993 18-Jul-22 5:42am

Sorry i forgot but i updated question, can you help me now?

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Answer 1 · 2022-07-18T04:51:00

First, you don't need form tags to do this. That will force the page to reload every time it completes, thereby erasing everything, including your results. Change the form tags to div and it should be fine.

This is not a legal conditional expression:

JavaScript

if (!rectangleLengthInput.value || !rectangleWidthInput.value == none) {

A proper OR expression testing two conditions would be:

JavaScript

if (!rectangleLengthInput.value == none || !rectangleWidthInput.value == none) {

But, of course, there's a problem. "none" does not exist as a defined value in javascript. To check for no value in a textbox, you can do something like this:

JavaScript

if (rectangleLengthInput.value === "" || rectangleWidthInput.value === "") {

Moving on...Your calculations are also wrong. You're trying to do calculations using the textboxes themselves, not the values in the textboxes. I leave it to you to figure out why.

What is the problem in this code?

1 solution

Solution 1

Add your solution here

Preview 0

What is the problem in this code?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us