Javascript可以将背景颜色更改为某些<div>

Question

I have the following HTML code in a table:

 $(function() { $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>'); $(".button").on("click", function() { var $button = $(this); var oldValue = $button.parent().find("input").val(); var divut = document.getElementById('french-hens'); if ($button.text() == "+") { var newVal = parseFloat(oldValue) + 1; } else { // Don't allow decrementing below zero if (oldValue > 0) { var newVal = parseFloat(oldValue) - 1; } else { newVal = 0; document.getElementById("french-hens").style.background = 'orange'; } } $button.parent().find("input").val(newVal); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td> <div class="numbers-row"> <input type="text" name="french-hens" id="french-hens" value="45"> </td> <td> <div class="numbers-row"> <input type="text" name="french-hens" id="french-hens" value="30"> </td> <td> <div class="numbers-row"> <input type="text" name="french-hens" id="french-hens" value="`0"> </td> <td> <div class="numbers-row"> <input type="text" name="french-hens" id="french-hens" value="`10"> </td> 

What I want to accomplish when the value of that div reach 0, the background color is changed.

With my Javascript code I managed to change only the first div.

Any ideas how to start with orange all the divs that already have value 0, and when I decrease the value to 0 to change the color automatically in orange. Thank in advance

Answer 1

You're running document.getElementById('french-hens') which only returns one element (per the name of the method), even though you have multiple elements with an id of 'french-hens'.

Instead, try using document.getElementsByName('french-hens') . This will give you an array that you'll have to loop through and set the color to orange on each individual element of the array.

Also, the point of an id is for it to be unique on the page. Having multiple elements with an id of 'french-hens' violates that.

Here's an example:

 var el1 = document.createElement('div'); var el2 = document.createElement('div'); el1.setAttribute('id', 'test'); el2.setAttribute('id', 'test'); el1.setAttribute('name', 'test'); el2.setAttribute('name', 'test'); document.body.appendChild(el1); document.body.appendChild(el2); var byId = document.getElementById('test'); var byName = document.getElementsByName('test'); console.log('document.getElementById:\\n', byId); console.log('document.getElementsByName:\\n', byName); 

Answer 2

I agree with Xeraqu's points about the use of Ids.

However, to get what I think you want, the only thing you needed to do was reuse the principles behind some of the code you already used:

$button.parent().find("input").val(newVal);

changing ".val" to ".css":

$button.parent().find("input").css("background-color","orange");

see this fiddle: https://jsfiddle.net/063mawvq/5/