I couldn't add a line break to this Javascript calculator

Question

Am trying to add a line break between "Calculate" button & result of a Javascript calculator- https://www.gadgetronicx.com/battery-life-calculator/. I am not much aware of web programming. I got help from stackoverflow community to build this calculator. This is how the results are showing up in the webpage

Here is the code

const bcForm = document.getElementById('battery-calculator')
bcForm.onsubmit=e=>
  {
  e.preventDefault()
  let time = (Number(bcForm.currunit.value) *bcForm.battcurr.valueAsNumber )
           / (Number(bcForm.loadunit.value) *bcForm.loadcurr.valueAsNumber )
  let time1= (Number(bcForm.loadunit.value) *bcForm.loadcurr.valueAsNumber )
           / (Number(bcForm.currunit.value) *bcForm.battcurr.valueAsNumber )
var unit, multiplier
if(Number(bcForm.loadunit.value)==1)
  {
    unit="A"
  }
else
  {
    unit="mA"
  }
let dischargerate=Number(bcForm.Battype.value)*bcForm.battcurr.value

  bcForm.timeResult.value = "1) Load can be powered for " + time.toFixed(2)+" hours"
  bcForm.time1Result.value = "2) Rate of battery discharge " + time1.toFixed(2)+" C"
  bcForm.dischargerate.value = "3) Maximum recommended discharge rate " + dischargerate.toFixed(2)+" "+ unit + " for optimum battery performance"
}

#battery-calculator fieldset,#battery-calculator label,#battery-calculator input,#battery-calculator select,#battery-calculator output,#battery-calculator button {
    border-radius: 4px;display: block !important ;float: left !important;margin: .3em !important;width:auto !important;margin-top:1em !important;}
#battery-calculator label,#battery-calculator button {clear: both !important;width:15em !important;}
#battery-calculator label {line-height: 2em !important;overflow: hidden !important;white-space: nowrap !important;font-weight:bold;}
#battery-calculator label::after {content: ' . . . . . . . . . . . . . . . . . . . '}
#battery-calculator button { background-color: #4CAF50; border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;}
#battery-calculator button:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}
#battery-calculator output {margin: 2em 2em .4em 1em !important;}

<form id="battery-calculator">
<fieldset>
    <label>Load current</label>
    <input type="number" name="loadcurr" value="0" min="0" >
    <select name="currunit">
      <option value="1"    select > A </option>
      <option value="1000"        > mA </option>
    </select>
        <br/>
    <label>Battery maximum capacity</label>
    <input type="number" name="battcurr"  value="0" min="0" >
    <select name="loadunit">
      <option value="1"    select > Ah </option>
      <option value="1000"        > mAh </option>
    </select>
        <br/>
    <label>Type of battery</label>
    <select name="Battype">
      <option value="1" > NiCd </option>
      <option value="0.5"> NiMH </option>
      <option value="0.2"> Lead Acid </option>
      <option value="1"> Li-ion </option>
      <option value="1"> Li-ion Polymer </option>
      <option value="NA"> Others </option>      
    </select>
    <button type="submit">Calculate</button>
    <br/>
        <output name="timeResult"></output>
    <br/>
    <output name="time1Result"></output>
    <br/>
    <output name="dischargerate"></output>
  </fieldset>
</form>

I have tried adding line break to the form and also tried writing it using Javascript as well but it didn't work. Am quite clueless now. Any help or lead will be much appreciated.

score 4 · Accepted Answer · answered Jul 09 '20 at 02:19

4

Your outputs still have the float property, all you need to do is clear them in your last block:

#battery-calculator output {
    margin: 2em 2em .4em 1em !important;
    clear:  both !important; /* add this line */
}

answered Jul 09 '20 at 02:19

SuperColin

131
1
9

score 2 · Answer 2 · answered Jul 09 '20 at 02:23

I think you'll find things much easier if you separate the different elements into <div>s rather than using <br> all the time. <div>s are much easier to style.

In your example, I don't think that there's any need for the text to be inside the form. You could do something like this:

<form id="battery-calculator">
<fieldset>
    <label>Load current</label>
    <input type="number" name="loadcurr" value="0" min="0" >
    <select name="currunit">
      <option value="1"    select > A </option>
      <option value="1000"        > mA </option>
    </select>
        <br/>
    <label>Battery maximum capacity</label>
    <input type="number" name="battcurr"  value="0" min="0" >
    <select name="loadunit">
      <option value="1"    select > Ah </option>
      <option value="1000"        > mAh </option>
    </select>
        <br/>
    <label>Type of battery</label>
    <select name="Battype">
      <option value="1" > NiCd </option>
      <option value="0.5"> NiMH </option>
      <option value="0.2"> Lead Acid </option>
      <option value="1"> Li-ion </option>
      <option value="1"> Li-ion Polymer </option>
      <option value="NA"> Others </option>      
    </select>
    <button type="submit">Calculate</button>
    
  </fieldset>
  <div>
        <output name="timeResult"></output>
  
  </div>
    <output name="time1Result"></output>
  </div>
  <div>
    <output name="dischargerate"></output>
  </div>

</form>

yeah, true. However, that adds extra tags, when you could handle things with mainly adding a few lines of CSS. — rexfordkelly, Jul 09 '20 at 02:49

score 1 · Answer 3 · answered Jul 09 '20 at 02:29

1

You can also display the results outside of the form , in another div for example just below your form. Good Luck !

answered Jul 09 '20 at 02:29

AntoninPOLY

11
2

rexfordkelly · Answer 4 · 2020-07-09T02:50:59.540

Working with what you have, css, is all you need and a few lines of JS. I removed the </br> tags, as they are not actually needed.

I also, fixed the "extra" padding under the submit button, and added a few lines of JS to update the display of the results...

const bcForm = document.getElementById('battery-calculator')
bcForm.onsubmit=e=>
  {
  e.preventDefault()
  let time = (Number(bcForm.currunit.value) *bcForm.battcurr.valueAsNumber )
           / (Number(bcForm.loadunit.value) *bcForm.loadcurr.valueAsNumber )
  let time1= (Number(bcForm.loadunit.value) *bcForm.loadcurr.valueAsNumber )
           / (Number(bcForm.currunit.value) *bcForm.battcurr.valueAsNumber )
var unit, multiplier
if(Number(bcForm.loadunit.value)==1)
  {
    unit="A"
  }
else
  {
    unit="mA"
  }
let dischargerate=Number(bcForm.Battype.value)*bcForm.battcurr.value

  bcForm.timeResult.value = "1) Load can be powered for " + time.toFixed(2)+" hours"
  bcForm.timeResult.style.display = "block"
  bcForm.time1Result.value = "2) Rate of battery discharge " + time1.toFixed(2)+" C"
  bcForm.time1Result.style.display = "block"
  bcForm.dischargerate.value = "3) Maximum recommended discharge rate " + dischargerate.toFixed(2)+" "+ unit + " for optimum battery performance"
  bcForm.dischargerate.style.display = "block"
}

#battery-calculator fieldset,#battery-calculator label,#battery-calculator input,#battery-calculator select,#battery-calculator output,#battery-calculator button {
    border-radius: 4px;display: block;float: left !important;margin: .3em !important;width:auto !important;margin-top:1em !important;}
#battery-calculator label,#battery-calculator button {clear: both !important;width:15em !important;}
#battery-calculator label {line-height: 2em !important;overflow: hidden !important;white-space: nowrap !important;font-weight:bold;}
#battery-calculator label::after {content: ' . . . . . . . . . . . . . . . . . . . '}
#battery-calculator button { background-color: #4CAF50; border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;}
#battery-calculator button:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}
#battery-calculator output {
    clear: both;
    display: none;
    float: left!important;
}

form#battery-calculator {
    width: 100%;
}

<form id="battery-calculator">
<fieldset>
    <label>Load current</label>
    <input type="number" name="loadcurr" value="0" min="0" >
    <select name="currunit">
      <option value="1"    select > A </option>
      <option value="1000"        > mA </option>
    </select>
        <br/>
    <label>Battery maximum capacity</label>
    <input type="number" name="battcurr"  value="0" min="0" >
    <select name="loadunit">
      <option value="1"    select > Ah </option>
      <option value="1000"        > mAh </option>
    </select>
        <br/>
    <label>Type of battery</label>
    <select name="Battype">
      <option value="1" > NiCd </option>
      <option value="0.5"> NiMH </option>
      <option value="0.2"> Lead Acid </option>
      <option value="1"> Li-ion </option>
      <option value="1"> Li-ion Polymer </option>
      <option value="NA"> Others </option>      
    </select>
    <button type="submit">Calculate</button>
        <output name="timeResult"></output>
        <output name="time1Result"></output>
        <output name="dischargerate"></output>
</form>

I couldn't add a line break to this Javascript calculator

4 Answers4