I need to be able to have the user pick a billing term from a select drop down and then choose checkboxes to add to the total. It seems to work relatively well on JSFIDDLE however on my site, there are some cases where selecting all the checkboxes and then resetting the total to 0 by selecting 'Choose billing term' then unchecking all the options will result in negative numbers. Does anyone have any suggestions? Even checking and unchecking options will start to get negative numbers.
HTML:
<div class="payment-term">
<label>Billing period:</label>
<select id="billing-price" name="billing-term" class="selectpicker">
<option value="0">Choose billing term</option>
<option value="300">12 Months: $300/mo. (Save 20%)</option>
<option value="350">1 Month: $350/mo.</option>
</select><br><br>
<label>Extra Features ($50/month): </label>
</div>
<section id="extra-features">
<div class="span3">
<label class="checkbox" for="Checkbox1">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Instagram
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Review site monitoring
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Google+
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> LinkedIn
</label>
</div>
<div class="span3">
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Pinterest
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> FourSquare
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Tumblr
</label>
<label class="checkbox">
<input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Advertising
</label>
</div>
</section>
<div class="card-charge-info">
Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime.
</div>
My javascript:
var select = document.getElementById('billing-price');
select.addEventListener('change', updatePrice, false);
var price = 0;
var additional = 0;
function updatePrice(e) {
price = parseFloat(select.value);
document.getElementById('payment-total').innerText = price + additional;
if (price == select.options[2].value){
document.getElementById('payment-rebill').innerText = 0 + additional;
} else {
document.getElementById('payment-rebill').innerText = price + additional;
}
}
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
total2 = document.getElementById('payment-rebill');
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
additional += add
total.innerHTML = price + additional
total2.innerHTML = price + additional
}
}
Working jsfiddle: http://jsfiddle.net/uZbee/2/
My site (not working correctly): http://thesomii.com/getstarted/basic/
I am using a javascript file for my checkboxes to give them a better appearance. I fear it maybe effecting my javascript code for the sum of checked boxes.
The negative value is caused by the input is not checked, so the this.checked in this line
var add = this.value * (this.checked ? 1 : -1);
is always false, resulting the added value is negative.
Change this.checked to this.parentNode.className.split(" ").indexOf("checked") > -1 may help.
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.parentNode.className.split(" ").indexOf("checked") > -1 ? 1 : -1);
additional += add
total.innerHTML = price + additional
total2.innerHTML = price + additional
}
}
Related
I have a small form designed to calculate a score based on the answers given. Everything works, the variables are shown in the variables and also shown in the html for a split second. However, after a split second, the function resets and the resulting var is also removed. In trying to understand, I think it has to do with the scope of the var or form behavior? Here is a snippet:
</head>
<body>
<form id="calculateChangeForm" name="calculateChangeForm">
<p><strong>1. To what extend does the change impact the organization?</strong></p>
<input id="q1a1" name="q1" type="radio" value="2"> <label for="q1a1">A specific department or a working group</label><br><input id="q1a2" name="q1" type="radio" value="6"> <label for="q1a2">One department </label><br><input id="q1a3" name="q1" type="radio" value="7"> <label for="q1a3">Several departments</label><br><input id="q1a4" name="q1" type="radio" value="8"> <label for="q1a4">Whole organization</label><br><input id="q1a5" name="q1" type="radio" value="8"> <label for="q1a5">Cross entities</label><br><input id="q1a6" name="q1" type="radio" value="9"> <label for="q1a6">Regional Impact</label><br><input id="q1a7" name="q1" type="radio" value="10"> <label for="q1a7">Group Impact</label><hr class="mb-5 mt-5">
<p><strong>2. How many employees are impacted? </strong></p>
<input id="q2a1" name="q2" type="radio" value="1"> <label for="q2a1"> < 10 </label><br><input id="q2a2" name="q2" type="radio" value="4"> <label for="q2a2">10 - 50 </label><br><input id="q2a3" name="q2" type="radio" value="7"> <label for="q2a3">51 - 100</label><br><input id="q2a4" name="q2" type="radio" value="8"> <label for="q2a4">101 - 200</label><br><input id="q2a5" name="q2" type="radio" value="9"> <label for="q2a5">201 - 500</label><br><input id="q2a6" name="q2" type="radio" value="10"> <label for="q2a6"> > 500 </label><br><br><button id="calculateChangeButton" class="button">Submit</button>
<script> document.getElementById("calculateChangeButton").onclick = function() {calculateChange();}; </script>
</form><hr class="mb-5 mt-5"></div>
<p>Your score is: <span id="changeScore"></span></p>
<script>
var changescore = 0;
function calculateChange(){
var val1 = 0;
for( i = 0; i < document.calculateChangeForm.q1.length; i++ ){
if( document.calculateChangeForm.q1[i].checked == true ){
val1 = document.calculateChangeForm.q1[i].value;
alert("The value of Question 1 answer is: " + val1);
}
}
var val2 = 0;
for( i = 0; i < document.calculateChangeForm.q2.length; i++ ){
if( document.calculateChangeForm.q2[i].checked == true ){
val2 = document.calculateChangeForm.q2[i].value;
alert("The value of Question 2 answer is: " + val2);
}
}
var changescore = parseInt(val1) + parseInt(val2);
alert("The total score: " + changescore);
document.getElementById("changeScore").innerHTML = changescore;
}
</script>
</body>
Thank you,
After input from user t348575, it was clear that the button should be changed to a an input type="button" in order to stop the form from being submitted:
My code updates the CPC textbox when options are selected, but when an agency discount is selected (i.e. the 10% checkbox), it successfully lowers the CPC textbox value by 10% but does not do the same for the Total Cost textbox.
The Total Cost textbox value should be the (CPC textbox value * number of clicks textbox) * percentdiscount multiplier
Can anyone see where I'm going wrong? I'll be happy to clarify further if I haven't explained this very well!
HTML:
<div class="runningtotal">
Running CPC Total (in £): <input id="sum" type="text" readonly="true" value="0.00" data-total="0" />
Total Cost (in £): <input id="totalcost" type="text" readonly="true" value="0 (until clicks specified)" data-total="0" />
</div>
<div class="black_whitelisting">
<h1>4. Blacklist/Whitelist?</h1>
<input type="checkbox" class="blacklist" name="blacklist" value="0.20" id="blacklist_checkbox" onclick="BlacklistFunction()">Blacklist required<br>
<input type="checkbox" class="whitelist" name="whitelist" value="0.30" id="whitelist_checkbox">Whitelist required<br>
</div>
<div class="selecttier">
<h1>5. Number of Clicks</h1>
<input id="numberofclickstextbox" type="text" value="0.00" data-total="0" oninput="calculatetier()" />
</div>
<div class="agencydiscount">
<h1>6. Agency Discount</h1>
<label>
<input type="radio" name="percentdiscount" value="1" checked>
None
</label>
<label>
<input type="radio" name="percentdiscount" id="10percent" value="0.9" onclick="calculatetotalcost10()" >
10% Discount
</label>
<label>
<input type="radio" name="percentdiscount" id="15percent" value="0.85" onclick="calculatetier15()" >
15% Discount
</label>
</div>
Javascript:
jQuery(function($) {
$('input[name="percentdiscount"]').on('change', function() {
applyDiscount();
});
$('input[type=checkbox]').click(function() {
let sum = 0;
$('input[type=checkbox]:checked').each(function() {
sum += parseFloat($(this).val());
});
$('#sum').val(sum.toFixed(2)).data('total', sum);
applyDiscount();
});
function applyDiscount() {
var pc = parseFloat($('input[name="percentdiscount"]:checked').val());
$('#sum').val(function() {
return ($(this).data('total') * pc).toFixed(2);
});
}
});
//to work out total cost
function calculatetier() {
var myBox5 = document.getElementById('numberofclickstextbox').value;
var myBox6 = document.getElementById('sum').value;
var result = document.getElementById('totalcost');
var myResult = myBox5 * myBox6;
result.value = myResult.toFixed(2);
}
Looks like you are calculatetier function isn't being called during the change of discount.
Working Demo: https://codepen.io/punith/pen/gOpaVxr?editors=1010
HTML code
<div class="runningtotal">
Running CPC Total (in £): <input id="sum" type="text" readonly="true" value="0.00" data-total="0" />
Total Cost (in £): <input id="totalcost" type="text" readonly="true" value="0 (until clicks specified)" data-total="0" />
</div>
<div class="black_whitelisting">
<h1>4. Blacklist/Whitelist?</h1>
<input type="checkbox" class="blacklist" name="blacklist" value="0.20" id="blacklist_checkbox" >Blacklist required<br>
<input type="checkbox" class="whitelist" name="whitelist" value="0.30" id="whitelist_checkbox">Whitelist required<br>
</div>
<div class="selecttier">
<h1>5. Number of Clicks</h1>
<input id="numberofclickstextbox" type="text" value="0.00" data-total="0" oninput="calculatetier()" />
</div>
<div class="agencydiscount">
<h1>6. Agency Discount</h1>
<label>
<input type="radio" name="percentdiscount" value="1" checked>
None
</label>
<label>
<input type="radio" name="percentdiscount" id="10percent" value="0.9" >
10% Discount
</label>
<label>
<input type="radio" name="percentdiscount" id="15percent" value="0.85" >
15% Discount
</label>
</div>
JS Code
function calculatetier() {
var myBox5 = document.getElementById('numberofclickstextbox').value;
var myBox6 = document.getElementById('sum').value;
var result = document.getElementById('totalcost');
if(myBox6=="0.00"){
myBox6 =1;
}
console.log(myBox6)
var myResult = myBox5 * myBox6;
result.value = myResult.toFixed(2);
}
jQuery(function($) {
$('input[name="percentdiscount"]').on('change', function() {
applyDiscount();
});
$('input[type=checkbox]').click(function() {
let sum = 0;
$('input[type=checkbox]:checked').each(function() {
sum += parseFloat($(this).val());
});
$('#sum').val(sum.toFixed(2)).data('total', sum);
applyDiscount();
});
//to work out total cost
function applyDiscount() {
var pc = parseFloat($('input[name="percentdiscount"]:checked').val());
$('#sum').val(function() {
return ($(this).data('total') * pc).toFixed(2);
});
calculatetier()
}
});
try to use onchange event instead I guess the event you are binding is not correct
<input id="numberofclickstextbox" type="text" value="0.00" data-total="0" onchange="calculatetier()" />
I am building a calculator in angularjs as a wordpress php plugin. Passing parameters as variables via a shortcode.
I have a jquery ui-slider with min, max and step values set by passed params:
<div ui-slider="{range: 'min'}" min="{$this->weight_minimum}"
max="{$this->weight_maximum}" step="{$this->weight_increment}"
ng-model="weight">
</div>
I also added two radio buttons after the slider:
<div class="user-selection">
<label class="radio-container">{{ "Pounds" | translate }}
<input type="radio" checked="checked" name="radio"
ng-model="selection" value="lbs">
<span class="checkmark"></span>
</label>
<label class="radio-container">{{ "Kilograms" | translate }}
<input type="radio" name="radio" ng-model="selection" value="kg">
<span class="checkmark"></span>
</label>
</div>
How can I change min/max values of the slider based on radio selection? I tried using ng-if but that is for showing/hiding html. I also tried adding an if statement in the app.controller with no success.
if ($scope.selection == 'lbs') {
weight_maximum = $this->weight_maximum;
} else if ($scope.selection == 'kg') {
weight_maximum = $this->weight_maximum / 2.2;
}
Use ng-change event example in the plunker
Code : html
<div class="user-selection">
<label class="radio-container"> Pounds
<input type="radio" checked="checked" name="radio" ng-change="changUnit()" ng-model="selection" value="lbs">
<span class="checkmark"></span>
</label>
<label class="radio-container"> Kilograms
<input type="radio" name="radio" ng-model="selection" value="kg" ng-change="changUnit()">
<span class="checkmark"></span>
</label>
</div>
<div>Min : {{weight_minimum}}</div>
<div>Max : {{weight_maximum}}</div>
<div>slider value : {{weight}}</div>
<br/>
<br/>
<div ui-slider min="{{weight_minimum}}" max="{{weight_maximum}}" step="{{weight_increment}}" ng-model="weight">
</div>
your controller :
var app = angular.module('plunker', ['ui.slider']);
app.controller('MainCtrl', function($scope) {
$scope.selection = 'kg'
$scope.weight_minimum = 10;
$scope.weight_maximum = 1000;
$scope.weight_increment = 1;
$scope.weight = 50;
$scope.changUnit = function() {
if ($scope.selection == 'lbs') {
$scope.weight_maximum = $scope.weight_maximum * 2.2;
} else if ($scope.selection == 'kg') {
$scope.weight_maximum = $scope.weight_maximum / 2.2;
}
};
});
/**
* #Summary: checkAllConnectedUser function, to create album
* #param: index, productObj
* #return: callback(response)
* #Description:
*/
$scope.shardBuyerKeyIdArray = [];
$scope.countBuyer = 0;
$scope.checkAllSharedBuyer = function(isChecked) {
if (isChecked) {
if ($scope.selectAll) {
$scope.selectAll = false;
} else {
$scope.selectAll = true;
}
angular.forEach($scope.selectedSharedBuyerObjectList, function(selectedBuyer) {
selectedBuyer.select = $scope.selectAll;
//IF ID WILL BE EXIST IN THE ARRAY NOT PSUH THE KEYID
if ($scope.shardBuyerKeyIdArray.indexOf(selectedBuyer.userTypeDto.keyId) == -1) {
$scope.shardBuyerKeyIdArray.push(selectedBuyer.userTypeDto.keyId);
$scope.countBuyer++;
}
});
} else {
$scope.selectAll = false;
//USED FOR UNCHECK ALL THE DATA ONE- BY-ONE
angular.forEach($scope.selectedSharedBuyerObjectList, function(selectedBuyer) {
selectedBuyer.select = $scope.selectAll;
var index = $scope.shardBuyerKeyIdArray.indexOf(selectedBuyer.userTypeDto.keyId);
$scope.shardBuyerKeyIdArray.splice(index, 1);
$scope.countBuyer--;
});
}
}
<div class="checkbox w3-margin" ng-if="selectedSharedBuyerObjectList.length > 0">
<span class="w3-right" ng-if="countBuyer">
<h5>You are selecting {{countBuyer}} buyers!</h5>
</span>
<label>
<input type="checkbox" ng-model="selectAll" ng-click="checkAllSharedBuyer(selectAll)"/>Check All
</label>
</div>
<div id="sharedRow" class="checkbox" ng-repeat="selectedBuyer in cmnBuyer = (selectedSharedBuyerObjectList | filter : userSearchInProduct
| filter : filterUser)">
<label>
<input type="checkbox" ng-model="selectedBuyer.select"
ng-change="selectedSharedBuyer($index, selectedBuyer.select, selectedBuyer.userTypeDto.keyId)"/>
{{selectedBuyer.personName}}
</label>
</div>
I have two list in which i have to count the select all checkbox length as well as single checkbox count my problem if the user un-check the ALL checkbox Checkbox count will be return -- what's the problem in my code?
$(function(){
var count = 0;
$('#sharedRow ').find('input[type=checkbox]').on('change',function(){
$('#msg').text('You are selecting '+$('#sharedRow ').find('input[type=checkbox]:checked').length+' buyers!')
})
$('#chkAll').on('change', function () {
if ($(this).is(':checked')) {
$('#sharedRow ').find('input[type=checkbox]').prop('checked', true);
$('#msg').text('You are selecting '+$('#sharedRow ').find('input[type=checkbox]:checked').length+' buyers!')
}
else {
$('#sharedRow ').find('input[type=checkbox]').prop('checked', false);
$('#msg').text('You are selecting '+$('#sharedRow ').find('input[type=checkbox]:checked').length+' buyers!')
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox w3-margin">
<span class="w3-right">
<h5 id="msg" >You are selecting 0 buyers!</h5>
</span>
<label>
<input id="chkAll" type="checkbox" />Check All
</label>
</div>
<div id="sharedRow" class="checkbox">
<label>
<input type="checkbox" value="1 Buyers" />1 Buyers
</label>
<label>
<input type="checkbox" value="2 Buyers" />2 Buyers
</label>
<label>
<input type="checkbox" value="3 Buyers" />3 Buyers
</label>
<label>
<input type="checkbox" value="4 Buyers" />4 Buyers
</label>
<label>
<input type="checkbox" value="5 Buyers" />5 Buyers
</label>
<label>
<input type="checkbox" value="6 Buyers" />6 Buyers
</label>
<label>
<input type="checkbox" value="7 Buyers" />7 Buyers
</label>
<label>
<input type="checkbox" value="8 Buyers" />8 Buyers
</label>
</div>
try this one. is it ok? if not then tell me what's wrong.
if you have a group of checkbox then you can find all selected checkbox.
$('div').find('input[type=checkbox]:checked').length;
If you only need the number
var count = $scope.selectedSharedBuyerObjectList.reduce(function(sum, item) {
return (item.select) ? sum + 1 : sum;
}, 0);
If you need the filtered array
var selected = $scope.selectedSharedBuyerObjectList.filter(function(item) {
return item.select;
});
var count = selected.length;
Or do it using plain old loop
var count = 0;
for (i = 0; i < $scope.selectedSharedBuyerObjectList.length; i++) {
if ($scope.selectedSharedBuyerObjectList.select) count++;
}
I'm building a huge form that requires me to initially show the opacity of elements at 0.5 and when a button is clicked the opacity is 1.0. I am able to do this with JavaScript but I need to manage it better by not calling an if statement for each element. Note that the elements are in no particular order and some need to toggle the opacity of more than one element.
Working Demo need to revise
SIMPLE CSS
[id^="dp"] {
opacity: 0.5;
}
HTML
GROUP 1<BR>
<input type="radio" id="abc1" name="abc1" onclick="showabc();"/>
<label for="abc1"> Yes </label>
<input type="radio" id="abc2" name="abc1" onclick="showabc();"/>
<label for="abc2"> No </label>
<div id="dpabc1">
<H4>Content 1 is dimmed</H4>
</div>
GROUP 2<BR>
<input type="radio" id="abc3" name="abc2" onclick="showabc();"/>
<label for="abc3"> Yes </label>
<input type="radio" id="abc4" name="abc2" onclick="showabc();"/>
<label for="abc4"> No </label>
<div id="dpabc7">
<H4>Content 2 is dimmed</H4>
</div>
GROUP 3<BR>
<input type="radio" id="abc5" name="abc3" onclick="showabc();"/>
<label for="abc5"> Yes </label>
<input type="radio" id="abc6" name="abc3" onclick="showabc();"/>
<label for="abc6"> No </label>
<div id="dpabc9">
<H4>Content 3 item 1 in its own div</H4>
</div>
<div id="dpabc11">
<H4>Content 3 item2 in its own div</H4>
CURRENT JAVASCRIPT I NEED TO REWRITE WITHOUT A BUNCH OF IF STATEMENTS FOR EACH ELEMENT
function showabc() {
if (document.getElementById("abc1").checked == true) {
document.getElementById("dpabc1").style.opacity = 1.0;
}
else {
document.getElementById("dpabc1").style.opacity = 0.5;
}
if (document.getElementById("abc3").checked == true) {
document.getElementById("dpabc7").style.opacity = 1.0;
}
else {
document.getElementById("dpabc7").style.opacity = 0.5;
}
if (document.getElementById("abc5").checked == true) {
document.getElementById("dpabc9").style.opacity = 1.0;
document.getElementById("dpabc11").style.opacity = 1.0;
}
else {
document.getElementById("dpabc9").style.opacity = 0.5;
document.getElementById("dpabc11").style.opacity = 0.5;
}
}
BEGINNING OF CODE REVISION HERE'S WHERE I'M STUCK. What I'm trying to do is match the variables in "checkMe" with the variables in dimMe. You can see abc1 & 3 need to show the opacity change of one item where abc5 needs to change to opacity to two items (dpabc9 & dpabc11).
function showabc() {
var checkMe = ["abc1" , "abc3" , "abc5" ];
var dimMe = ["dpabc1" , "dpabc7" , "dpabc9, dpabc11"];
for (var i=0, l=checkMe.length; i<l; ++i) {
document.getElementById(checkMe[i]).style.opacity = 1.0;
}
else {
document.getElementById(checkMe[i]).style.opacity = 0.5;
}
}
Given some minor changes to the HTML, the appropriate grouping of elements within <fieldset> elements, and the use of yes/no values, I'd suggest the following JavaScript:
function opacityToggle(){
// 'this' refers to the element to which the event-handling was bound:
var divs = this.getElementsByTagName('div'),
// using CSS syntax offered by 'querySelector()' to find the
// first input element of 'type=radio' and is checked:
confirmed = this.querySelector('input[type="radio"]:checked');
// iterates over the 'div' elements, and sets the opacity according
// to whether the checked radio input has the value of 'yes':
for (var i = 0, len = divs.length; i < len; i++) {
divs[i].style.opacity = confirmed.value === 'yes' ? 1 : 0.5;
}
}
// gets the fieldset elements:
var fieldsets = document.getElementsByTagName('fieldset');
// iterates over the fieldset elements:
for (var i = 0, len = fieldsets.length; i < len; i++) {
// and uses 'addEventListener' to add a listener for the 'change' event,
// when that event is detected, the opacityToggle function is called:
fieldsets[i].addEventListener('change', opacityToggle);
}
JS Fiddle demo.
This works on the following HTML:
<fieldset>
<legend>GROUP 1</legend>
<input type="radio" id="abc1" name="abc1" value="yes" />
<label for="abc1">Yes</label>
<input type="radio" id="abc2" name="abc1" value="no" />
<label for="abc2">No</label>
<div id="dpabc1">
<H4>Content 1 is dimmed</H4>
</div>
</fieldset>
<fieldset>
<legend>GROUP 2</legend>
<input type="radio" id="abc3" name="abc2" value="yes" />
<label for="abc3"> Yes </label>
<input type="radio" id="abc4" name="abc2" value="no" />
<label for="abc4"> No </label>
<div id="dpabc7">
<H4>Content 2 is dimmed</H4>
</div>
</fieldset>
<fieldset>
<legend>GROUP 3</legend>
<input type="radio" id="abc5" name="abc3" value="yes" />
<label for="abc5"> Yes </label>
<input type="radio" id="abc6" name="abc3" value="no" />
<label for="abc6"> No </label>
<div id="dpabc9">
<H4>Content 3 item 1 in its own div</H4>
</div>
<div id="dpabc11">
<H4>Content 3 item2 in its own div</H4>
</div>
</fieldset>
UPDATED HTML
UPDATED FIDDLE
GROUP 1<BR>
<input type="radio" id="abc1" name="abc1" onclick="showabc('content1',1);"/>
<label for="abc1"> Yes </label>
<input type="radio" id="abc2" name="abc1"
onclick="showabc('content1',0);"/>
<label for="abc2"> No </label>
<div id="dpabc1" class="content1">
<H4>Content 1 is dimmed</H4>
</div>
GROUP 2<BR>
<input type="radio" id="abc3" name="abc2" onclick="showabc('content2',1);"/>
<label for="abc3"> Yes </label>
<input type="radio" id="abc4" name="abc2" onclick="showabc('content2',0);"/>
<label for="abc4"> No </label>
<div id="dpabc7" class="content2">
<H4>Content 2 is dimmed</H4>
</div>
GROUP 3<BR>
<input type="radio" id="abc5" name="abc3" onclick="showabc('content3',1);"/>
<label for="abc5"> Yes </label>
<input type="radio" id="abc6" name="abc3" onclick="showabc('content3',0);"/>
<label for="abc6"> No </label>
<div id="dpabc9" class="content3">
<H4>Content 3 item 1 in its own div</H4>
</div>
<div id="dpabc11" class="content3">
<H4>Content 3 item2 in its own div</H4>
</div>
UPDATED JAVASCRIPT
function showabc(cssClass,makeBold) {
var elements = document.getElementsByClassName(cssClass);
var opacity = 1.0;
if (makeBold == 0) {
opacity = 0.5;
}
for (var i = 0; i < elements.length; i++) {
elements[i].style.opacity = opacity;
}
}