title: How to use buttons to manipulate values
body: <p>I have been working on a calculator as a learning project for myself.I am able to display the numeric values onto the screen of the calcultor. But cant seem to figure out how to use the basic operator buttons with the numeric buttons together to display the value.</p>
  <p>I tried targeting the different different buttons to get an output but had no luck.</p>
  <p>Could someone please explain some different methods that I could use to resolve the issue?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// display of calculor
  let screen= document.getElementById("display");
  
  // addition button
  let buttons = document.querySelectorAll("button");
  
  
  
  
  // displays on the calculator
  function diplays(){
      for(let button of buttons){
          button.addEventListener("click",function(e){
          screen.value += e.target.value;
          })}
          
  }
  // button that adds values on calculator
  function add(){
      let plus = document.querySelector(".plus");
      // event listener on the addition button
      plus.addEventListener("click",function(e){
  
  
  
      })
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Calculator&lt;/title&gt;
      &lt;link rel="stylesheet" href="calculator.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Calculator&lt;/h1&gt;
      &lt;div class="container"&gt;§
          &lt;div&gt;
              &lt;input type="text" id="display"&gt;
          &lt;/div&gt;
          &lt;div class="buttons1"&gt;
              &lt;button class="size seven" value="7"&gt;7&lt;/button&gt;
              &lt;button class="size eight" value ="8"&gt;8&lt;/button&gt;
              &lt;button class="size nine" value ="9"&gt;9&lt;/button&gt;
              &lt;button class="size negative" &gt;+/-&lt;/button&gt;
              &lt;button class="size arrow"&gt;→&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="buttons1"&gt;
              &lt;button class="size four" value="4"&gt;4&lt;/button&gt;
              &lt;button class="size five" value ="5"&gt;5&lt;/button&gt;
              &lt;button class="size six " value="6"&gt;6&lt;/button&gt;
              &lt;button class="size multiply"&gt;×&lt;/button&gt;
              &lt;button class="size divide"&gt;÷&lt;/button&gt;
              &lt;div&gt;
  
  &lt;div class="buttons2"&gt;
      &lt;button class="size one" value="1"&gt;1&lt;/button&gt;
      &lt;button class="size two" value="2"&gt;2&lt;/button&gt;
      &lt;button class="size three" value="3"&gt;3&lt;/button&gt;
      &lt;button class="size minus"&gt;-&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="buttons2"&gt;
      &lt;button class="size clear"&gt;C&lt;/button&gt;
      &lt;button class="size zero" value="0"&gt;0&lt;/button&gt;
      &lt;button class="size dot" &gt;.&lt;/button&gt;
      &lt;button class="size plus"&gt;+&lt;/button&gt;
      &lt;button class="size equals"&gt;=&lt;/button&gt;
  
  &lt;/div&gt;
          
    &lt;/div&gt;
      
  &lt;/body&gt;
  &lt;script src="calculator.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>