如果单击，如何使每次输出的项目都在输入字段中输出

时间：2019-07-08 17:06:42

标签： javascript jquery html css

我该如何做，以便每次具有类output-item的东西每次都被单击时，输出的项都应在输入字段中，但是同时我希望添加它而不是替换它因为我在做计算器？ 

const $ = document.querySelector.bind(document);
    const buttons = {
      delete: $("#delete"),
      divide: $("#divide"),
      one: $("#one"),
      two: $("#two"),
      three: $("#three"),
      four: $("#four"),
      five: $("#five"),
      six: $("#six"),
      seven: $("#seven"),
      eight: $("#eight"),
      nine: $("#nine"),
      multiplicate: $("#multiplicate"),
      minus: $("#minus"),
      equalSign: $("#equal"),
      plus: $("#plus"),
      inputfield: $("#inputfield")
    }

    let outputArray = document.querySelectorAll(".outputted-item");
    debugger;
    outputArray.forEach((output) => {
      output.addEventListener("click", () => {
        inputfield.innerHTML += output;
        console.log(output);
        debugger;
      })
    })

    console.log(outputArray);
 /* general styling */

    * {
      outline: 0;
    }

    html {
      font-size: 62.5%;
      box-sizing: border-box;
    }


    /* body */

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.89), rgba(0, 0, 0, 0.835), rgba(0, 0, 0, 0.89)), url(/img/desktop-pc-1920x1080-thumbnail_00242.jpg);
      height: 100vh;
      width: 100vw;
    }


    /* the calculator */

    .container {
      height: 40rem;
      width: 40rem;
      background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.664), rgba(0, 255, 255, 0.664), rgba(53, 53, 158, 0.637), rgba(0, 0, 139, 0.657), rgba(0, 0, 0, 0.664));
      display: grid;
      position: absolute;
      top: 30%;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      left: 40.5%;
      grid-gap: 1rem;
      box-shadow: 0rem 1.3rem 2rem rgb(0, 0, 0);
      padding: 2rem 1rem 2rem 1rem;
      border-radius: 1.5rem;
      align-content: center;
      justify-content: center;
      align-items: center;
      justify-items: center;
      transition: all .5s;
    }

    .item {
      position: relative;
      box-shadow: 0rem .05rem 1.5rem black;
      border-radius: .8rem;
      font-weight: bold;
      font-size: 2rem;
      transition: all .3s;
      text-align: center;
      padding: 3rem;
      cursor: pointer;
    }

    .item-multiplication {
      grid-column: 4 / 5;
      grid-row: 4 / 5;
    }

    .item-equalsign {
      grid-column: 3 / 4;
      grid-row: 4 / 5;
    }

    .item-delete {
      grid-row: 4 / 5;
      grid-column: 1 / 3;
      padding: 2rem 4rem;
    }

    .container:hover {
      transform: translate(0, -2rem) scale(1.1, 1.1);
    }

    .item:hover {
      transform: translate(0, -1rem) scale(1.1, 1.1);
    }

    .item:active {
      padding: 1.5rem;
    }


    /* output of the calculator */

    .inputfield {
      position: absolute;
      left: 43.5%;
      top: 15%;
      padding: 3rem 6rem;
      border: 0;
      outline: 0;
      border-radius: 2rem;
      background: rgb(13, 78, 78);
      box-shadow: 0rem .7rem 2rem black;
    }

    .inputfield::placeholder {
      font-size: 2rem;
      font-weight: bold;
      text-align: center;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- output of the calculator -->
    <input type="text" placeholder="Calccy" class="inputfield" id="inputfield">

    <!-- the calculator -->
    <div class="container">
      <div class="item outputted-item" id="one">1</div>
      <div class="item outputted-item" id="two">2</div>
      <div class="item outputted-item" id="three">3</div>
      <div class="item outputted-item" id="plus">+</div>
      <div class="item outputted-item" id="four">4</div>
      <div class="item outputted-item" id="five">5</div>
      <div class="item outputted-item" id="six">6</div>
      <div class="item outputted-item" id="minus">-</div>
      <div class="item outputted-item" id="seven">7</div>
      <div class="item outputted-item" id="eight">8</div>
      <div class="item outputted-item" id="nine">9</div>
      <div class="item outputted-item" id="divide">/</div>
      <div class="item outputted-item item-multiplication" id="outputted-item multiplicate">x</div>
      <div class="item item-equalsign" id="equal">=</div>
      <div class="item item-delete" id="delete">DEL</div>
    </div>

1 个答案:

答案 0 :(得分：1)

我发现了一些问题区域：

您尝试通过设置#inputfield而不是.innerHTML来更改.value元素。并且您尝试像访问全局定义一样访问它，但是应该通过buttons.inputfield访问该元素吗？

您要用来更新输入字段的值是.outputted-item的 content ，而不是元素本身。所以在这里，我认为您想使用output.innerHTML而不是output。

outputArray.forEach((output) => {
      output.addEventListener("click", () => {
        buttons.inputfield.value += output.innerHTML;
      })
    })


const $ = document.querySelector.bind(document);
const buttons = {
  delete: $("#delete"),
  divide: $("#divide"),
  one: $("#one"),
  two: $("#two"),
  three: $("#three"),
  four: $("#four"),
  five: $("#five"),
  six: $("#six"),
  seven: $("#seven"),
  eight: $("#eight"),
  nine: $("#nine"),
  multiplicate: $("#multiplicate"),
  minus: $("#minus"),
  equalSign: $("#equal"),
  plus: $("#plus"),
  inputfield: $("#inputfield")
}

let outputArray = document.querySelectorAll(".outputted-item");

outputArray.forEach((output) => {
  output.addEventListener("click", () => {
    buttons.inputfield.value += output.innerHTML;
    console.log(buttons.inputfield.innerHTML);
  })
})

console.log(outputArray);
/* general styling */

* {
  outline: 0;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}


/* body */

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.89), rgba(0, 0, 0, 0.835), rgba(0, 0, 0, 0.89)), url(/img/desktop-pc-1920x1080-thumbnail_00242.jpg);
  height: 100vh;
  width: 100vw;
}


/* the calculator */

.container {
  height: 40rem;
  width: 40rem;
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.664), rgba(0, 255, 255, 0.664), rgba(53, 53, 158, 0.637), rgba(0, 0, 139, 0.657), rgba(0, 0, 0, 0.664));
  display: grid;
  position: absolute;
  top: 30%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  left: 40.5%;
  grid-gap: 1rem;
  box-shadow: 0rem 1.3rem 2rem rgb(0, 0, 0);
  padding: 2rem 1rem 2rem 1rem;
  border-radius: 1.5rem;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  transition: all .5s;
}

.item {
  position: relative;
  box-shadow: 0rem .05rem 1.5rem black;
  border-radius: .8rem;
  font-weight: bold;
  font-size: 2rem;
  transition: all .3s;
  text-align: center;
  padding: 3rem;
  cursor: pointer;
}

.item-multiplication {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}

.item-equalsign {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

.item-delete {
  grid-row: 4 / 5;
  grid-column: 1 / 3;
  padding: 2rem 4rem;
}

.container:hover {
  transform: translate(0, -2rem) scale(1.1, 1.1);
}

.item:hover {
  transform: translate(0, -1rem) scale(1.1, 1.1);
}

.item:active {
  padding: 1.5rem;
}


/* output of the calculator */

.inputfield {
  position: absolute;
  left: 43.5%;
  top: 15%;
  padding: 3rem 6rem;
  border: 0;
  outline: 0;
  border-radius: 2rem;
  background: rgb(13, 78, 78);
  box-shadow: 0rem .7rem 2rem black;
}

.inputfield::placeholder {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- output of the calculator -->
<input type="text" placeholder="Calccy" class="inputfield" id="inputfield">

<!-- the calculator -->
<div class="container">
  <div class="item outputted-item" id="one">1</div>
  <div class="item outputted-item" id="two">2</div>
  <div class="item outputted-item" id="three">3</div>
  <div class="item outputted-item" id="plus">+</div>
  <div class="item outputted-item" id="four">4</div>
  <div class="item outputted-item" id="five">5</div>
  <div class="item outputted-item" id="six">6</div>
  <div class="item outputted-item" id="minus">-</div>
  <div class="item outputted-item" id="seven">7</div>
  <div class="item outputted-item" id="eight">8</div>
  <div class="item outputted-item" id="nine">9</div>
  <div class="item outputted-item" id="divide">/</div>
  <div class="item outputted-item item-multiplication" id="outputted-item multiplicate">x</div>
  <div class="item item-equalsign" id="equal">=</div>
  <div class="item item-delete" id="delete">DEL</div>
</div>

相关问题
最新问题