0

I am a fairly new developer looking to get the basics to linking my HTML to mu JS. I tried time and time again and looked for tutorials on YouTube to figure this out but I couldn't; so I came here. .I am trying to make a conditional calculation that will only execute if my HTML radio input is selected. It is pretty obvious once you run my code. I didn't include my CSS to keep it clean. Thanks in advance.

let radiusInput = document.getElementById("radiusInputSpeares");
let spearesAnswer = document.getElementById("spearesAnswer");
let spearesAnswerPi = document.getElementById("spearesAnswerPi");
let radiusOutput;

function spearesSolve() {
  radiusOutput = (radiusInput.value ** 3) * 3.14159265359 * (4 / 3);
  spearesAnswer.innerText = Math.round(radiusOutput);
  spearesAnswerPi.innerText = Math.round(radiusOutput / 3.14159265359)
}
<div class="spearesSection">
  <div class="spearesSectionHeading" id="sectionSpearesHeading">
    <p class="spearesSectionText">Calculate the Volume of a Speare!</p>
  </div>
  <div class="workAreaSpeares">
    <img class="spearesPicture" src="../Images/Speare.jpg" alt="Error, Page cannot be loaded">
    <p class="divisionSpeareTitle">Choose Segment:</p>
    <p class="textSpearesRadius">Radius:</p>
    <input type="number" class="inputRadiusSpeare" id="radiusInputSpeares">

    <p class="aQuarterSpeare">A Quarter (1/4)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare1">
    <p class="halfSpeare">A Half (1/2)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare2">
    <p class="threeQuartersSpeare">Three Quarters (3/4)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare3">
    <p class="WholeSpeare"> Whole (4/4)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare4">

    <button class="buttonExecuteSpeares" id="buttonExecuteSpeares" onclick="spearesSolve()">Solve!</button>
    <p class="answerSpeare"> Answer =</p>
    <div class="outputAreaSpeare">
      <p id="spearesAnswer"></p>
    </div>
    <p class=answerSpearePi>In Terms of Pi =</p>
    <div class="outputAreaSpearePi">
      <p id="spearesAnswerPi"></p>
      <p class="piSpeare">π</p>
    </div>
  </div>
</div>
Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
Iron Man
  • 11
  • 1
  • See https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button for how to get the value of the selected radio button. Add a check for none selected, and return from the function without doing the calculation. – Barmar Jul 26 '22 at 22:43
  • have a look to https://stackoverflow.com/questions/62688386/problem-with-calculator-made-with-radio-button – Mister Jojo Jul 26 '22 at 22:59

0 Answers0