I have a counter which increases/decreases with +1 when a button is clicked.
The buttons are
<button onClick="onClick()" type="button">ADD MORE</button>
<button onClick="onUnClick()" type="button">X</button>
Then the value in H6 changes
<h6 class="askclient">How Many? <a id="clicks">1</a></h6>
My Javascript Code
<script>
var clicks = 1;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function onUnClick() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};
</script>
I need to modify it to also add/subtract the value of a select dropdown to the counter so that the total now factors in the text of the dropdown. The dropdown:
<select id="ddlViewBy" name="repetition[]">
<option value="1">None</option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
<option value="5">4</option>
</select>
You can use onChange to do it.
<h6 class="askclient">How Many? <a id="clicks">1</a></h6>
<button onClick="onClick()" type="button">ADD MORE</button>
<button onClick="onUnClick()" type="button">X</button>
<select id="ddlViewBy" name="repetition[]" onChange="onChange(this)">
<option value="0">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script>
var clicks = 1;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function onUnClick() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};
function onChange(elem) {
clicks += Number(elem.value);
document.getElementById("clicks").innerHTML = clicks;
document.getElementById("ddlViewBy").selectedIndex = 0;
}
</script>
Using Number() is required because elem.value is string.
Force back selectedIndex to the None item. Otherwise, if the same number is selected consecutively, onChange will not fire.