CODEWITHSUNDEEP
html
Akash
Akash

Reputation: 1

How to write with innerHTML on input type text?

I want the answer of the calculated area to appear in a text box I've tried different methods but it doesn't work

{{ document.getElementById("area(A)").innerHTML = <input type="number" id="area(A)" + calculatearea +"> }} can anyone tell me what I am doing wrong here?

    <p style=color:tan; font-size:30px; >Area and Perimeter Calculator</p>
    <br>

<form>
    Length:
    <br>
    <input type="number" id="length(L)" placeholder="Insert Length Here">
    <br/>
    <br>
    Width:
    <br>
    <input type="number" id="width(W)" placeholder="Insert Width Here">
    <br/>
    <br>
    <button type="button" onclick="calculateperimeter()">Calculate Perimeter</button> 
    <button type="button" onclick="calculatearea()">Calculate Area</button>
    <br> 
    <br>
    Perimeter: 
    <p id="perimeter(P)"></p>
    <br>
    <br> 
    Area:
    <p id="area(A)"></p>

</form>


<script type="text/javascript">
    
    function calculateperimeter(){   
    var length= document.getElementById("length(L)").value;
        var width= document.getElementById("width(W)").value;   
    var perimeter=(length) * (2) + (width) * (2);
    document.getElementById("perimeter(P)").innerHTML = perimeter;  
    }
    
</script>


    <script type="text/javascript">
     
        function calculatearea(){   
        var length= document.getElementById("length(L)").value;
        var width= document.getElementById("width(W)").value;   
        var area=(length) * (width);    
        document.getElementById("area(A)").innerHTML = <input type="number" id="area(A)" + calculatearea +"> ;
        }
    
    </script>

</body>

Upvotes: 0

Views: 84

Answers (3)

Rafee Shaik
Rafee Shaik

Reputation: 679

We assign values to id's with variables. Like

document.getElementById("area").value = area;

function calculateperimeter() {
  var length = document.getElementById("length(L)").value;
  var width = document.getElementById("width(W)").value;
  var perimeter = (length) * (2) + (width) * (2);
  document.getElementById("perimeter(P)").innerHTML = perimeter;
}

function calculatearea() {
  var length = document.getElementById("length(L)").value;
  var width = document.getElementById("width(W)").value;
  var area = (length) * (width);
  document.getElementById("area(A)").value = area;
}
<p style=color:tan; font-size:30px;>Area and Perimeter Calculator</p>
<br>

<form>
  Length:
  <br>
  <input type="number" id="length(L)" placeholder="Insert Length Here">
  <br/>
  <br> Width:
  <br>
  <input type="number" id="width(W)" placeholder="Insert Width Here">
  <br/>
  <br>
  <button type="button" onclick="calculateperimeter()">Calculate Perimeter</button>
  <button type="button" onclick="calculatearea()">Calculate Area</button>
  <br>
  <br> Perimeter:
  <p id="perimeter(P)"></p>
  <br>
  <br> Area:
  <input type="number" id="area(A)">

Upvotes: 0

AryanJassal
AryanJassal

Reputation: 31

I believe that the innerHTML content should be in a string. Try this:

document.getElementById("area(A)").innerHTML = `<input type="number" id="area(A)" value="${calculatearea}">`;

Note that I used backticks as they allow us to substitute a variable in the string by using ${variable name here}

Upvotes: 1

Pinncik
Pinncik

Reputation: 321

Wouldn’t it be easier If you do it like this ? Just use innerText on that paragraph which you’ve stored in variable and fill it with your result.

function calculateperimeter(){   
    var length= document.getElementById("length(L)").value;
    var width= document.getElementById("width(W)").value;   
    var perimeter=length * 2 + width * 2;
    document.getElementById("perimeter(P)").innerText = perimeter;  
}

 function calculatearea(){   
    var length= document.getElementById("length(L)").value;
    var width= document.getElementById("width(W)").value;   
    var area=length * width;
    document.getElementById("area(A)").innerText = area
    }

Upvotes: 0

Related Questions