Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
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
Updated 18-Jul-22 4:51am
v2
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

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.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900