CODEWITHSUNDEEP
javascripthtml
New_guy_in_here
New_guy_in_here

Reputation: 37

how to see the content of multiple buttons

I have two buttons and I want their contents to be displayed when pressed.

<div>
    <h1 id="one">Shapes</h1>
    <button id="one1">Square</button>
    <button id="one2">Rectangle</button>
</div>

<div id="square">
    <h3>Square</h3>
    <img src="" alt="" height="" width="" />
    Area of a: <input id="area" type="number">
    <button onclick="aarea()">Calculate</button>
</div>

<div id="rectangle">
    <h3>Rectangle</h3>
    <img src="" alt="" height="" width="" />
    Area of a: <input id="area" type="number">
    Area of b: <input id="areb" type="number">
    <button onclick="aarea()">Calculate</button>
</div>

Do I need to make a separate function to calculate the values ​​when displaying the content?

Upvotes: 0

Views: 54

Answers (1)

async await
async await

Reputation: 2405

Would something like this work for you? Just using js to toggle a css class which changes rendered display attribute from none to block?

const get = queryStr => document.querySelector(queryStr);
get("#one1").addEventListener("click", () => {
  get("#square").classList.toggle("shown");
});
get("#one2").addEventListener("click", () => {
  get("#rectangle").classList.toggle("shown");
});
get("#square button").addEventListener("click", () => {
  const val = get("#square input").value;
  const len = parseFloat(val);
  alert("area is: ", len ** 2);
});
get("#rectangle button").addEventListener("click", () => {
  const v1 = get("#rectangle #len").value;
  const v2 = get("#rectangle #width").value;
  const len = parseFloat(v1);
  const width = parseFloat(v2);
  alert("area is: ", len * width);
});
#square, #rectangle {
  display: none;
}

#square.shown, #rectangle.shown {
  display: block;
}
<div>
    <h1 id="one">Shapes</h1>
    <button id="one1">Square</button>
    <button id="one2">Rectangle</button>
</div>

<div id="square">
    <h3>Square</h3>
    <img src="" alt="" height="" width="" />
    Square side length: <input id="area" type="number">
    <button>Calculate</button>
</div>

<div id="rectangle">
    <h3>Rectangle</h3>
    <img src="" alt="" height="" width="" />
    length: <input id="len" type="number">
    width: <input id="width" type="number">
    <button>Calculate</button>
</div>

Upvotes: 1

Related Questions