What is the best way to showcase a user's input in a webpage using vanilla javascript

Question

What is the best way to showcase a user's input in a webpage using vanilla javascript

Struggling with creating functionalities for a simple calculator using vanilla.js. Able to display numbers on click but facing issues with multiple clicks and deletion of values. Trying to use addeventlistener but encountering a Type Error "addeventlistener not a function". Any recommended websites or tutorials to improve understanding of vanilla.js? Thank you in advance.

var result = document.querySelector('#result');

var clear = document.querySelector('#delete');

var backSpace = document.querySelector('.backspace');

var numbers = document.querySelectorAll('.input-btn');

var operators = document.querySelector('.operator-right');

var equalBtn = document.querySelector('.equal-btn');

function insert(num) {
  result.value = num;
}

<div class="container">
  <div class="calc">
    <div class="result">
      <input class="input-btn__result" id="result" value="0">
    </div>
    <div class="btns">
      <input class="clear" id="delete" type="button" onClick="clear()" value="C">
      <input class="backspace" type="button" name="" value="<">
      <input class="input-btn__divide operator-right" type="button" name="" value="/">
      <input class="input-btn" type="button" onClick="insert(1)" value="1">
      <input class="input-btn" type="button" onClick="insert(2)" name="" value="2">
      <input class="input-btn" type="button" onClick="insert(3)" name="" value="3">
      <input class="input-btn operator-right" type="button" name="" value="*">
      <input class="input-btn" type="button" onClick="insert(4)" name="" value="4">
      <input class="input-btn" type="button" onClick="insert(5)" name="" value="5">
      <input class="input-btn" type="button" onClick="insert(6)" name="" value="6">
      <input class="input-btn operator-right" type="button" name="" value="+">
      <input class="input-btn" type="button" onClick="insert(7)" name="" value="7">
      <input class="input-btn" type="button" onClick="insert(8)" name="" value="8">
      <input class="input-btn" type="button" onClick="insert(9)" name="" value="9">
      <input class="input-btn operator-right" type="button" name="" value="-">
      <input class="input-btn" type="button" onClick="insert('.')" name="" value=".">
      <input class="input-btn" type="button" onClick="insert(0)" name="" value="0">
      <input class="equal-btn" type="button" name="" value="=">
    </div>
  </div>
</div>

javascript

Answer 1

Answer №1

There are several approaches to accomplishing your goal. Instead of seeking recommendations on resources for learning vanilla JS, it's advisable to explore various resources available through a simple Google search and select the one that suits you best. As mentioned by Alvin in their response, understanding addEventListener is crucial.

Here's how I would tackle it utilizing your HTML structure (with one important adjustment: I've removed all instances of the onClick attribute from your HTML - separating JavaScript code from HTML layout is recommended):

const result = document.getElementById('result'),
      btns = document.querySelector('div.btns');

let calculandum = '';

for (let child of btns.children) {
  child.addEventListener('click', insert);
}

function insert(e) {
  let btnValue = e.target.value;
  switch (btnValue){
    case 'C':
      result.value = '0';
      calculandum = '';
      break;
    case '<':
      if (result.value) result.value = result.value.slice(0,-1);
      if (result.value === '') result.value = '0';
      break;
    // Similar cases for other operations omitted for brevity
  } 
}

<div class="container">
  <div class="calc">
    <div class="result">
      <input class="input-btn__result" id="result" value="0">
    </div>
    <div class="btns">
      <!-- Buttons structure here -->
    </div>
  </div>
</div>

This should suffice for handling multiplications, and you can extrapolate this concept for the remaining operations as well. Additionally, the unnecessary vars have been eliminated. It's worth reconsidering how classes are used for HTML elements; while classes are suitable for multiple elements, IDs serve better for individual elements (thus, classes like calc and btns could be changed to IDs).

Answer 2

There are several approaches to accomplishing your goal. Instead of seeking recommendations on resources for learning vanilla JS, it's advisable to explore various resources available through a simple Google search and select the one that suits you best. As mentioned by Alvin in their response, understanding addEventListener is crucial.

Here's how I would tackle it utilizing your HTML structure (with one important adjustment: I've removed all instances of the onClick attribute from your HTML - separating JavaScript code from HTML layout is recommended):

const result = document.getElementById('result'),
      btns = document.querySelector('div.btns');

let calculandum = '';

for (let child of btns.children) {
  child.addEventListener('click', insert);
}

function insert(e) {
  let btnValue = e.target.value;
  switch (btnValue){
    case 'C':
      result.value = '0';
      calculandum = '';
      break;
    case '<':
      if (result.value) result.value = result.value.slice(0,-1);
      if (result.value === '') result.value = '0';
      break;
    // Similar cases for other operations omitted for brevity
  } 
}

<div class="container">
  <div class="calc">
    <div class="result">
      <input class="input-btn__result" id="result" value="0">
    </div>
    <div class="btns">
      <!-- Buttons structure here -->
    </div>
  </div>
</div>

This should suffice for handling multiplications, and you can extrapolate this concept for the remaining operations as well. Additionally, the unnecessary vars have been eliminated. It's worth reconsidering how classes are used for HTML elements; while classes are suitable for multiple elements, IDs serve better for individual elements (thus, classes like calc and btns could be changed to IDs).

Answer 3

Answer №2

You have the option to assign a class name specifically for input buttons that are intended for the insert function. Afterwards, you can utilize the addEventListener method to attach events.

var result = document.querySelector('#result');

var clear = document.querySelector('#delete');

var backSpace = document.querySelector('.backspace');

var numbers = document.querySelectorAll('.input-btn');

var operators = document.querySelector('.operator-right');

var equalBtn = document.querySelector('.equal-btn');

var insertBtns = document.querySelectorAll('.insert-btn');

function insert(e) {
  result.value = e.target.value;
}

for (var i = 0; i < insertBtns.length; i++) {
  insertBtns[i].addEventListener('click', insert);
}

<div class="container">
  <div class="calc">
    <div class="result">
      <input class="input-btn__result" id="result" value="0">
    </div>
    <div class="btns">
      <input class="clear" id="delete" type="button" onClick="clear()" value="C" >
      <input class="backspace" type="button" name="" value="<">
      <input class="input-btn__divide operator-right" type="button" name="" value="/">
      <input class="input-btn insert-btn" type="button"  value="1">
      <input class="input-btn insert-btn" type="button" name="" value="2">
      <input class="input-btn insert-bt" type="button" name="" value="3">
      <input class="input-btn operator-right" type="button" name="" value="*">
      <input class="input-btn insert-btn" type="button" name="" value="4">
      <input class="input-btn insert-btn" type="button" name="" value="5">
      <input class="input-btn insert-btn" type="button" name="" value="6">
      <input class="input-btn operator-right" type="button" name="" value="+">
      <input class="input-btn insert-btn" type="button" name="" value="7">
      <input class="input-btn insert-btn" type="button" name="" value="8">
      <input class="input-btn insert-btn" type="button" name="" value="9">
      <input class="input-btn operator-right" type="button" name="" value="-">
      <input class="input-btn insert-btn" type="button" name="" value=".">
      <input class="input-btn insert-btn" type="button" name="" value="0">
      <input class="equal-btn"  type="button" name="" value="=">
    </div>
  </div>
</div>

Answer 4

You have the option to assign a class name specifically for input buttons that are intended for the insert function. Afterwards, you can utilize the addEventListener method to attach events.

var result = document.querySelector('#result');

var clear = document.querySelector('#delete');

var backSpace = document.querySelector('.backspace');

var numbers = document.querySelectorAll('.input-btn');

var operators = document.querySelector('.operator-right');

var equalBtn = document.querySelector('.equal-btn');

var insertBtns = document.querySelectorAll('.insert-btn');

function insert(e) {
  result.value = e.target.value;
}

for (var i = 0; i < insertBtns.length; i++) {
  insertBtns[i].addEventListener('click', insert);
}

<div class="container">
  <div class="calc">
    <div class="result">
      <input class="input-btn__result" id="result" value="0">
    </div>
    <div class="btns">
      <input class="clear" id="delete" type="button" onClick="clear()" value="C" >
      <input class="backspace" type="button" name="" value="<">
      <input class="input-btn__divide operator-right" type="button" name="" value="/">
      <input class="input-btn insert-btn" type="button"  value="1">
      <input class="input-btn insert-btn" type="button" name="" value="2">
      <input class="input-btn insert-bt" type="button" name="" value="3">
      <input class="input-btn operator-right" type="button" name="" value="*">
      <input class="input-btn insert-btn" type="button" name="" value="4">
      <input class="input-btn insert-btn" type="button" name="" value="5">
      <input class="input-btn insert-btn" type="button" name="" value="6">
      <input class="input-btn operator-right" type="button" name="" value="+">
      <input class="input-btn insert-btn" type="button" name="" value="7">
      <input class="input-btn insert-btn" type="button" name="" value="8">
      <input class="input-btn insert-btn" type="button" name="" value="9">
      <input class="input-btn operator-right" type="button" name="" value="-">
      <input class="input-btn insert-btn" type="button" name="" value=".">
      <input class="input-btn insert-btn" type="button" name="" value="0">
      <input class="equal-btn"  type="button" name="" value="=">
    </div>
  </div>
</div>

What is the best way to showcase a user's input in a webpage using vanilla javascript

Answer №1

Answer №2

Similar questions

React is unable to identify the `isDisabled` attribute on a DOM element within an img tag

Looking for a JavaScript regex pattern that matches strings starting with the letter "p" and containing at least

What is the reason for sending a JSON string in an HTTP POST request instead of a JavaScript object in AngularJS

Embed an external website within a div element

Display the DIV specifically for visitors arriving from Facebook

Steps for dynamically executing an Angular ng-include directive in real-time

What is the best way to enlarge text size with jquery?

Having trouble rendering JSON data on a FlatList component in React Native

Issue with React not displaying JSX when onClick Button is triggered

AngularJS and CodeIgniter collaborating to bring server-side pagination

Change the appearance of text with a button click using JavaScript

Revamping the hyperlinks in my collapsible menu extension

Can anyone guide me on creating a Mapbox map layer using React.js?

How do I use React and Material-UI to efficiently display multiple tables from a complex JSON object containing multiple arrays of data?

Vue.JS and its Onclick event handler allows for dynamic and interactive

Having trouble with Google Maps Places API autocomplete feature; it's not functioning properly

Assistance needed with selecting elements using jQuery

The JavaScript function I created to remove the last item in an array is not functioning correctly when it encounters an "else

Exploring the methods for monitoring multiple UDP ports on a single address in Node.js within a single process

Combine functions from two objects that share the same properties into an array for each property