0

I can't seem to figure out the problem in my code. It does not execute the way I wanted it to.

Here is my HTML code:

      <div class="calculator">
          <form method="post">
            <label>Bill</label>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="11"
              height="17"
              class="icon"
            >
              <path
                fill="#9EBBBD"
                d="M6.016 16.328v-1.464c1.232-.08 2.22-.444 2.964-1.092.744-.648 1.116-1.508 1.116-2.58v-.144c0-.992-.348-1.772-1.044-2.34-.696-.568-1.708-.932-3.036-1.092V4.184c.56.144 1.012.4 1.356.768.344.368.516.816.516 1.344v.288h1.824v-.432c0-.448-.088-.876-.264-1.284a3.783 3.783 0 00-.744-1.116A4.251 4.251 0 007.54 2.9a5.324 5.324 0 00-1.524-.492V.872H4.288V2.36a5.532 5.532 0 00-1.416.324c-.448.168-.84.392-1.176.672-.336.28-.604.616-.804 1.008-.2.392-.3.844-.3 1.356v.144c0 .96.316 1.708.948 2.244.632.536 1.548.884 2.748 1.044v3.912c-.704-.16-1.248-.472-1.632-.936-.384-.464-.576-1.08-.576-1.848v-.288H.256v.576c0 .464.08.924.24 1.38.16.456.404.88.732 1.272.328.392.744.728 1.248 1.008s1.108.476 1.812.588v1.512h1.728zM4.288 7.424c-.688-.128-1.164-.332-1.428-.612-.264-.28-.396-.644-.396-1.092 0-.464.176-.832.528-1.104.352-.272.784-.448 1.296-.528v3.336zm1.728 5.712V9.344c.768.128 1.328.328 1.68.6.352.272.528.688.528 1.248 0 .544-.196.984-.588 1.32-.392.336-.932.544-1.62.624z"
              />
            </svg>
            <input
              type="text"
              placeholder="0"
              pattern="[0-9]"
              aria-label="Total Amount"
              class="bill"
            />

            <div class="tip-percent-container parent">
              <label>Select Tip %</label>
              <div class="tip-percent-content">
                <button class="tip">5%</button>
                <button class="tip">10%</button>
                <button class="tip">15%</button>
                <button class="tip">25%</button>
                <button class="tip">50%</button>
                <input
                  type="text"
                  class="tip"
                  placeholder="Custom"
                  pattern="[0-9]"
                  max="100"
                  maxlength="3"
                  aria-label="Total Amount"
                />
              </div>
            </div>

            <div class="label">
              <label>Number of People</label>
              <p class="input-zero">Can't be zero</p>
            </div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="13"
              height="16"
              class="icon"
            >
              <path
                fill="#9EBBBD"
                d="M9.573 7.729c.406 0 .784.07 1.126.209.342.14.639.33.881.569.232.227.438.503.614.82a5.1 5.1 0 01.407.949c.097.312.178.654.242 1.016.062.359.105.699.126 1.011.02.307.031.624.031.945 0 .836-.259 1.512-.768 2.01-.504.492-1.17.742-1.98.742H2.748c-.81 0-1.477-.25-1.98-.742C.259 14.76 0 14.084 0 13.248c0-.322.01-.64.032-.945.02-.312.063-.652.126-1.01.063-.363.144-.705.242-1.017.1-.323.238-.643.407-.948.176-.318.382-.594.613-.821.243-.238.54-.43.882-.57.342-.138.72-.208 1.125-.208.16 0 .313.067.61.265.183.123.397.264.636.421.204.134.48.259.822.372.333.11.671.167 1.005.167a3.19 3.19 0 001.006-.167c.341-.113.618-.238.822-.372l.636-.42c.296-.2.45-.266.61-.266zM6.598 0C7.63 0 8.522.38 9.252 1.129s1.1 1.666 1.1 2.724c0 1.06-.37 1.976-1.1 2.725-.73.75-1.623 1.13-2.654 1.13-1.03 0-1.924-.38-2.653-1.13-.73-.749-1.1-1.666-1.1-2.725 0-1.058.37-1.975 1.1-2.724C4.675.379 5.567 0 6.598 0z"
              />
            </svg>
            <input
              type="text"
              placeholder="0"
              pattern="[0-9]"
              aria-label="Number of People"
              class="number-of-people"
            />
          </form>
        </div>
        <div class="result parent">
          <div class="result-container">
            <div class="tip-amount">
              <div class="title">
                <p>Tip Amount <span>/ person</span></p>
              </div>
              <div class="tip-amount-price">
                <p class="price">$0.00</p>
              </div>
            </div>
            <div class="total-amount">
              <div class="title">
                <p>Total <span>/ person</span></p>
              </div>
              <div class="total-amount-price">
                <p class="price">$0.00</p>
              </div>
            </div>
            <button type="reset" id="reset" disabled>Reset</button>
          </div>
        </div>

This is my JavaScript

const inputs = document.querySelectorAll("input");
inputs.addEventListener("keyup", () => {
  if (
    inputs[0].value === "" ||
    inputs[2].value === "" ||
    inputs[2].value === 0
  ) {
    resetBtn.disabled = true;
  } else {
    resetBtn.disabled = false;
  }
});

OR

const inputs = document.querySelectorAll("input");
inputs.addEventListener("keyup", () => {
  if (
    inputs[0].value.lrngth < 1 ||
    inputs[2].value.length < 1
  ) {
    resetBtn.disabled = true;
  } else {
    resetBtn.disabled = false;
  }
});

I cannot seem to grasp where I got problems since the button does not disable/enable the way it should despite the if-statement that I wrote. I included the script.js inside the body tag by the way.

Anon
  • 11
  • 2
  • Why did you remove the JavaScript? – Barmar Jun 20 '23 at 01:23
  • `inputs.addEventlistener` doesn't work like that in vanilla JS. You have to loop through the `inputs` and add the event listener to each element individually. – Geshode Jun 20 '23 at 01:24

0 Answers0