Navigating through DOM event termination

Question

Navigating through DOM event termination

I'm encountering a minor issue. I have a form containing a few inputs[type="text"] wrapped in div elements (plus and minus). How can I increment and decrement these inputs without having to create variables, classes, or ids for each element? Someone suggested using arrays, but I'm unsure of how to approach this...

The current solution involves assigning classes to each tag...

var child = document.querySelector("#child");
var adult = document.querySelector("#adult");
var rooms = document.querySelector("#rooms");
var plusChild = document.querySelector(".plus_child");
var minusChild = document.querySelector(".minus_child");

var childV = child.value;
var adultV = adult.value;
var roomsV = rooms.value; 

plusChild.addEventListener("click", function(){
    if(childV<10){
        childV++;
        child.value = "" + childV;
    }
});

minusChild.addEventListener("click", function(){
    if(childV>0) {
        childV--;
        child.value = "" + childV;
    }
});

.main-form {
    width: 500px;
    margin: 0 auto;
}
.input {
    display: inline-block;
    width: 100px;
    height: 15px;
    background: none;
    outline: none;
}
.plus {
    display: inline-block;
    background: #999999;
    width: 15px;
    height: 15px;
}
.minus {
    display: inline-block;
    background: #999999;
    width: 15px;
    height: 15px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <form action="" class="main-form">
        
        <div class="input-item">
        <span>child</span>
        <div class="toggle plus plus_child">+</div>
        <input type="text" class="input" placeholder="0" id="child">
        <div class="toggle minus minus_child">-</div>
        </div>
        <br>
        <div class="input-item">
        <span>adult</span>
        <div class="toggle plus">+</div>
        <input type="text" class="input" placeholder="0" id="adult">
        <div class="toggle minus">-</div>
        </div>
        <br>
        <div class="input-item">
        <span>rooms</span>
        <div class="toggle plus">+</div>
        <input type="text" class="input" placeholder="0" id="rooms">
        <div class="toggle minus">-</div>
        </div>
        
        
    </form>
    
    
   
    <script src="script.js"></script>
</body>
</html>

javascript arrays function dom click

Answer 1

Answer №1

To easily manipulate the value of an element with the ID "child", you can accomplish it like this: var child = document.getElementById("child"); child.value++; or child.value--;

Answer 2

To easily manipulate the value of an element with the ID "child", you can accomplish it like this: var child = document.getElementById("child"); child.value++; or child.value--;

Answer 3

Answer №2

The key is understanding the structure of the DOM tree. Instead of giving every element an ID to attach a handler, you just need to locate its position in the tree and work from a known reference point.

For example:

<div id="attach_to_me">
   <button>+</button>
   <button>-</button>
</div>

In this case, the buttons themselves don't perform any action individually. However, you can easily handle both buttons with one click event like this:

$('#attach_to_me button').on('click', function(e) {
    char = this.text();
    if (char == '+') { do_plus(); }
    if (char == '-') { do_minus(); }
});

This single click event manages both buttons. If you need to identify which specific button was clicked, you can use e.target to pinpoint the clicked element. This allows you to navigate the tree effectively. For instance, if you have multiple buttons in different rows:

<tr>
   <td>foo</td><td><button>x</button></td>
   <td>bar</td><td><button>x</button></td>
   <td>baz</td><td><button>x</button></td>
</tr>

$('td button').on('click', function (e) {
    clicked_button = e.target;
    e.target.parentNode.previousSibling.text(); // `bar`
});

Starting from the clicked button, you can navigate up or across the tree to access the text in the adjacent <td>.

Answer 4

The key is understanding the structure of the DOM tree. Instead of giving every element an ID to attach a handler, you just need to locate its position in the tree and work from a known reference point.

For example:

<div id="attach_to_me">
   <button>+</button>
   <button>-</button>
</div>

In this case, the buttons themselves don't perform any action individually. However, you can easily handle both buttons with one click event like this:

$('#attach_to_me button').on('click', function(e) {
    char = this.text();
    if (char == '+') { do_plus(); }
    if (char == '-') { do_minus(); }
});

This single click event manages both buttons. If you need to identify which specific button was clicked, you can use e.target to pinpoint the clicked element. This allows you to navigate the tree effectively. For instance, if you have multiple buttons in different rows:

<tr>
   <td>foo</td><td><button>x</button></td>
   <td>bar</td><td><button>x</button></td>
   <td>baz</td><td><button>x</button></td>
</tr>

$('td button').on('click', function (e) {
    clicked_button = e.target;
    e.target.parentNode.previousSibling.text(); // `bar`
});

Starting from the clicked button, you can navigate up or across the tree to access the text in the adjacent <td>.

Answer 5

Answer №3

If the structure of the HTML remains constant, you can make use of the previous and next sibling functions.

Here is an example implementation:

function handleFirst(Element) { // code for handling first sibling }
function handleSecond(Element) { // code for handling second sibling }
var textInputs = document.querySelectorAll('input[type=text]');
for(var i=0; i < textInputs.length; i++) {
    textInputs[i].previousSibling.addEventListener('click', handleFirst);
    textInputs[i].nextSibling.addEventListener('click', handleSecond);
}

Make sure to refer to the opposite sibling function inside your click handlers in order to target the respective input element.

Answer 6

If the structure of the HTML remains constant, you can make use of the previous and next sibling functions.

Here is an example implementation:

function handleFirst(Element) { // code for handling first sibling }
function handleSecond(Element) { // code for handling second sibling }
var textInputs = document.querySelectorAll('input[type=text]');
for(var i=0; i < textInputs.length; i++) {
    textInputs[i].previousSibling.addEventListener('click', handleFirst);
    textInputs[i].nextSibling.addEventListener('click', handleSecond);
}

Make sure to refer to the opposite sibling function inside your click handlers in order to target the respective input element.

Navigating through DOM event termination

Answer №1

Answer №2

Answer №3

Similar questions

How do I pass input values when calling an AJAX function to submit a form in HTML?

What is the best way to exhibit information from a get request within an option tag?

Developing a website that utilizes Node.js for browser-based RSS scraping

Enter data into the appropriate columns

Creating a circular image in a responsive navigation bar

What is the method for assigning 'selective-input' to a form field in Angular?

Connect cells within an HTML table by drawing a line between them

Is it possible to submit a form to two separate pages individually rather than simultaneously?

Updating HighCharts with fresh data through Ajax

Error: non-integer values cannot be used as indices when examining an array containing dictionaries

Guide on connecting various information to a jquery element through .data() within a custom plugin

Improving the method for calculating the sum of a property value within an array

Retrieve resources from a pre-built npm package on-the-fly

Forming a collection of different classes

Working with Angular.js ng-repeat and conditions

Flickering screen observed during authentication verification with local storage in NextJS

The Javascript validation error for radio buttons briefly appears for a moment when it should stay visible

Unable to apply insertRule with keyframes

What is the best way to style nodes in a Force Directed Graph using CSS in D3?

What is the reason behind the consistent size of 8 for pointers to arrays in C programming language?