How would I add text to the end of an incremented or decremented value using JavaScript?-CodePudding

I am new to web dev and I am working on an input box that has values between 4.0 and 50.0. These values represent kilowatts and I want to place "kw" at the end of the values the user can see while they are incrementing and decrementing.

Here is the JavaScript I have that works well, but I cannot figure out how to add "kw" to the numeric values when the user clicks the minus and plus button on my html form.

You can check out the full html, css, and javascript here to see it all together:

let valueNum;

// Plus Button Function
document.querySelector(".plus-btn").addEventListener("click", function() {
  valueNum = document.getElementById("system-size-input").value;

  if (valueNum < 50) {
    valueCount = parseFloat(  valueNum - 0.5).toFixed(1);
    document.getElementById("system-size-input").value = valueCount;
  }
});

// Minus Button Function
document.querySelector(".minus-btn").addEventListener("click", function() {
  valueNum = document.getElementById("system-size-input").value;

  if (valueNum > 4.0) {
    valueCount = parseFloat(--valueNum   0.5).toFixed(1);
    document.getElementById("system-size-input").value = valueCount;
  } else if (valueNum == 4.0) {
    document.getElementById("system-size-input").value = valueCount;
  }
});

/** Set Global Styling Variables **/

:root {
  /** Fonts **/
  --mainFont: "Arial";
  --textFont: "Open Sans", sans-serif;
  --secondaryFont: "Raleway", sans-serif;
  /** Colors **/
  --primary: #4f5449;
  --darkGray: #2f2e2e;
  --lightGray: #ebebeb;
  --white: #fff;
  --black: #000;
}


/** Apply Natural Box Layout Model to All Elements - Allow Components to Change **/

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  /* Now 10px = 1rem! */
}


/** Use Flexbox to Limit the Use of Media Queries and to Center the Main Element on All Devices**/

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  font-family: var(--mainFont);
  font-size: 1.6rem;
  line-height: 2;
}

.calculator-form {
  margin-left: 5rem;
}


/** Style Calculator Form Input and Label Sections 
System Size Input area was not given a class of 'input'
so the buttons would remain inline with the input field. 
It was given only and ID to target for a one off style and
for JS **/

.label,
.input {
  display: block;
}

.input {
  width: 80%;
  padding: 2rem;
}

.label {
  margin-top: 2rem;
  font-weight: bold;
}

.address-input {
  text-transform: uppercase;
}

.address-input::placeholder {
  text-transform: none;
}

#system-size-input {
  width: 60%;
  padding: 1.5rem;
  text-align: center;
}

.yes-radio-btn {
  margin-right: 3rem;
}


/** Style All Buttons **/

.btn {
  background-color: var(--primary);
  border: none;
  color: var(--white);
  padding: 0 1.5rem;
  text-align: center;
  text-decoration: none;
  font-size: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

<main >
  <form  action="form-results.html" method="get">
    <div >
      <label  for="address">Address*</label>
      <input  name="address" placeholder="Address" type="text" autocomplete="off" value="" required />
    </div>

    <div >
      <label  for="state">State*</label>
      <select  name="state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK" selected>Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>

    <div >
      <label  for="number-stories">Number of Stories</label
          >
          <select  name="stories">
            <option value="One Story">One Story</option>
            <option value="Two Stories">Two Stories</option>
            <option value="Three Stories">Three Stories</option>
          </select>
        </div>

        <div >
          <label  for="home-size"
            >Home Size (sq. ft.)*</label
          >
          <input
            
            name="home-size"
            placeholder="Home Size"
            type="text"
            autocomplete="on"
            value=""
            required
          />
        </div>

        <div >
          <label  for="roof-complexity"
            >Roof Complexity Type*</label
          >
          <div>
            <input
              type="radio"
              id="simple"
              name="roof-complexity"
              value="simple"
              checked
            />
            <label for="simple">Simple</label>
    </div>

    <div>
      <input type="radio" id="moderate" name="roof-complexity" value="moderate" checked />
      <label for="moderate">Moderate</label>
    </div>

    <div>
      <input type="radio" id="complex" name="roof-complexity" value="complex" />
      <label for="complex">Complex</label>
    </div>
    </div>
    <div >
      <label  for="system-size">Select System Size*</label
          >
          <button  type="button">-</button>
          <input id="system-size-input" type="text" value="4.0" />
          <button  type="button"> </button>
        </div>
        <div >
          <label  for="new-construction"
            >New Construction*</label
          >
          <label  for="yes-radio">Yes</label>
      <input  type="radio" name="nc-radio-btn" value="Yes" />
      <label  for="no-radio">No</label>
      <input  type="radio" name="nc-radio-btn" value="No" />
    </div>
  </form>
</main>

<script src="scripts/test.js"></script>

CodePudding user response：

Keep track of your value outside of the input like you can see on the first line. Then just concatenate that value with 'kW':

let valueNum = document.getElementById("system-size-input").value;
document.getElementById("system-size-input").value = valueNum   'kW';

// Plus Button Function
document.querySelector(".plus-btn").addEventListener("click", function () {
  if (valueNum < 50) {
    valueNum= parseFloat(  valueNum - 0.5).toFixed(1);
    document.getElementById("system-size-input").value = valueNum   'kW';
  }
});

// Minus Button Function
document.querySelector(".minus-btn").addEventListener("click", function () {
  if (valueNum > 4.0) {
    valueNum = parseFloat(--valueNum   0.5).toFixed(1);
    document.getElementById("system-size-input").value = valueNum   'kW';
  } else if (valueNum == 4.0) {
    document.getElementById("system-size-input").value = valueNum   'kW';
  }
});

Another solution would be to let the input value be number 'kW' and then every time you want to increment or decrement strip the 'kW' of the value and add it again but I think the above solution is easier.

CodePudding user response：

Instead of reading valueNum from your input element, keep it as a number in memory, and use it only to set its value :

const inputElt = document.getElementById("system-size-input");
let valueNum = 4;

// Plus Button Function
document.querySelector(".plus-btn").addEventListener("click", function () {
    if (valueNum >= 50) return;
    valueNum  ;
    inputElt.value = parseFloat(valueNum - 0.5).toFixed(1)   " KW";
});

// Minus Button Function
document.querySelector(".minus-btn").addEventListener("click", function () {
    if (valueNum <= 3) return;
    valueNum--;
    inputElt.value = parseFloat(valueNum   0.5).toFixed(1)   " KW";
});

<div >
    <label  for="system-size">Select System Size*</label>
    <button  type="button">-</button>
    <input id="system-size-input" type="text" value="4.0 KW" />
    <button  type="button"> </button>
</div>

CodePudding user response：

let valueNum;

// Plus Button Function
document.querySelector(".plus-btn").addEventListener("click", function () {
  valueNum = document.getElementById("system-size-input").value;

  if (valueNum < 50) {
    valueCount = parseFloat(  valueNum - 0.5).toFixed(1);
    



    let valueNum;

    // Plus Button Function
    document.querySelector(".plus-btn").addEventListener("click", function () {
      valueNum = document.getElementById("system-size-input").value.split(' ');

      if (valueNum[0] < 50) {
        valueCount = parseFloat(  valueNum[0] - 0.5).toFixed(1);
        valueCount=`${valueCount} kw`;
        document.getElementById("system-size-input").value = valueCount;
      }
    });

    // Minus Button Function
    document.querySelector(".minus-btn").addEventListener("click", function () {
      valueNum = document.getElementById("system-size-input").value.split(' ');

      if (valueNum[0] > 4.0) {
        valueCount = parseFloat(--valueNum[0]   0.5).toFixed(1);
        valueCount=`${valueCount} kw`;
        document.getElementById("system-size-input").value = valueCount;
      } else if (valueNum[0] == 4.0) {
      valueCount=`${valueCount} kw`;
        document.getElementById("system-size-input").value = valueCount;
      }
    });
    /** Set Global Styling Variables **/

    :root {
      /** Fonts **/
      --mainFont: "Arial";
      --textFont: "Open Sans", sans-serif;
      --secondaryFont: "Raleway", sans-serif;

      /** Colors **/
      --primary: #4f5449;
      --darkGray: #2f2e2e;
      --lightGray: #ebebeb;

      --white: #fff;
      --black: #000;
    }

    /** Apply Natural Box Layout Model to All Elements - Allow Components to Change **/

    *,
    *:before,
    *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 62.5%; /* Now 10px = 1rem! */
    }

    /** Use Flexbox to Limit the Use of Media Queries and to Center the Main Element on All Devices**/

    main {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    body {
      font-family: var(--mainFont);
      font-size: 1.6rem;
      line-height: 2;
    }

    .calculator-form {
      margin-left: 5rem;
    }

    /** Style Calculator Form Input and Label Sections 
    System Size Input area was not given a class of 'input'
    so the buttons would remain inline with the input field. 
    It was given only and ID to target for a one off style and
    for JS **/

    .label,
    .input {
      display: block;
    }

    .input {
      width: 80%;
      padding: 2rem;
    }

    .label {
      margin-top: 2rem;
      font-weight: bold;
    }

    .address-input {
      text-transform: uppercase;
    }

    .address-input::placeholder {
      text-transform: none;
    }

    #system-size-input {
      width: 60%;
      padding: 1.5rem;
      text-align: center;
    }

    .yes-radio-btn {
      margin-right: 3rem;
    }

    /** Style All Buttons **/

    .btn {
      background-color: var(--primary);
      border: none;
      color: var(--white);
      padding: 0 1.5rem;
      text-align: center;
      text-decoration: none;
      font-size: 2rem;
      border-radius: 0.5rem;
      cursor: pointer;
    }
    <main >
          <form  action="form-results.html" method="get">
            <div >
              <label  for="address">Address*</label>
              <input
                
                name="address"
                placeholder="Address"
                type="text"
                autocomplete="off"
                value=""
                required
              />
            </div>

            <div >
              <label  for="state">State*</label>
              <select  name="state">
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="DC">District Of Columbia</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK" selected>Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
              </select>
            </div>

            <div >
              <label  for="number-stories"
                >Number of Stories</label
              >
              <select  name="stories">
                <option value="One Story">One Story</option>
                <option value="Two Stories">Two Stories</option>
                <option value="Three Stories">Three Stories</option>
              </select>
            </div>

            <div >
              <label  for="home-size"
                >Home Size (sq. ft.)*</label
              >
              <input
                
                name="home-size"
                placeholder="Home Size"
                type="text"
                autocomplete="on"
                value=""
                required
              />
            </div>

            <div >
              <label  for="roof-complexity"
                >Roof Complexity Type*</label
              >
              <div>
                <input
                  type="radio"
                  id="simple"
                  name="roof-complexity"
                  value="simple"
                  checked
                />
                <label for="simple">Simple</label>
              </div>

              <div>
                <input
                  type="radio"
                  id="moderate"
                  name="roof-complexity"
                  value="moderate"
                  checked
                />
                <label for="moderate">Moderate</label>
              </div>

              <div>
                <input
                  type="radio"
                  id="complex"
                  name="roof-complexity"
                  value="complex"
                />
                <label for="complex">Complex</label>
              </div>
            </div>
            <div >
              <label  for="system-size"
                >Select System Size*</label
              >
              <button  type="button">-</button>
              <input id="system-size-input" type="text" value="4.0 kw" />
              <button  type="button"> </button>
            </div>
            <div >
              <label  for="new-construction"
                >New Construction*</label
              >
              <label  for="yes-radio">Yes</label>
              <input  type="radio" name="nc-radio-btn" value="Yes" />
              <label  for="no-radio">No</label>
              <input  type="radio" name="nc-radio-btn" value="No" />
            </div>
          </form>
        </main>

        <script src="scripts/test.js"></script>




    document.getElementById("system-size-input").value = valueCount;
  }
});

// Minus Button Function
document.querySelector(".minus-btn").addEventListener("click", function () {
  valueNum = document.getElementById("system-size-input").value;

  if (valueNum > 4.0) {
    valueCount = parseFloat(--valueNum   0.5).toFixed(1);
    document.getElementById("system-size-input").value = valueCount;
  } else if (valueNum == 4.0) {
    document.getElementById("system-size-input").value = valueCount;
  }
});