/    Sign up×
Community /Pin to ProfileBookmark

Display javascript output in plain text instead of in a textbox

Copy linkTweet thisAlerts:
Jun 22.2012

So, I have this code that’s adding the values of checked checkboxes together. The annoying part is that I can’t get the total to display as just normal text. I would then also like to use the total in a different function for calculating a percentage.

I’m a noob at javascript, so feel free to hack away at this…..

[CODE]
<!DOCTYPE html>
<html>
<body>

<form>
<input onclick=”clickCh(this)” type=”checkbox” name=”one” value=”10″> $10.00<br>
<input onclick=”clickCh(this)” type=”checkbox” name=”two” value=”12″> $12.00<br>
<br>
<input id=”total” type=”text” name=”total”>
</form>
<script language=”JavaScript” type=”text/javascript”>
var total = document.getElementById(“total”)
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 – caller.value*1}
</script>
[/CODE]

Thanks!

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERJun 22.2012 — Trying to keep as much of your logic as I can ...
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;!-- From: http://www.webdeveloper.com/forum/showthread.php?p=1212126#post1212126 --&gt;

&lt;html&gt;
&lt;body&gt;

&lt;form&gt;
&lt;input onclick="clickCh(this)" type="checkbox" value="10"&gt; $10.00&lt;br&gt;
&lt;input onclick="clickCh(this)" type="checkbox" value="12"&gt; $12.00&lt;br&gt;
&lt;br&gt;
&lt;input id="totalValue" type="hidden" value="0"&gt;
&lt;div id="totalDisplay"&gt;&lt;/div&gt;
&lt;/form&gt;

&lt;script type="text/javascript"&gt;
function clickCh(caller) {
var total = document.getElementById("totalValue").value*1;
if(caller.checked){ total += caller.value*1; }
else { total -= caller.value*1; }
document.getElementById('totalValue').value = total;
document.getElementById('totalDisplay').innerHTML
= 'Total: $'+total.toFixed(2)+'&lt;p&gt;6&amp;#37; = $'+(total*.06).toFixed(2);
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@gtilflmauthorJun 23.2012 — Awesome JMRKER! As I get deeper into this, I may have another question, but this will give me a great start.

Thanks!
Copy linkTweet thisAlerts:
@JMRKERJun 23.2012 — Awesome JMRKER! As I get deeper into this, I may have another question, but this will give me a great start.

Thanks![/QUOTE]

You're most welcome.

Happy to help.

Good Luck! ?
Copy linkTweet thisAlerts:
@gtilflmauthorJun 23.2012 — As I predicted... I'm back.

Here's what I'm ultimately trying to do. I'm creating a gradebook where the course content is organized by unit (Unit 1, Unit 2, etc.). PHP will echo out all of the data from the database that has two parts: Pts. Earned and Total Pts. The grade would be a simple calculation of Pts. Earned &#247; Total Pts. I would like two things at the end of this...

1.) I want the user to be able to check/uncheck boxes on each gradebook entry to see how their final grade would be different with/without that grade entry.

2.) I want the user to be able to see their total grade for each unit (as well as an overall grade) AND have the check/uncheck functionality for that unit that I mentioned in #1.


Example:

UNIT 1

Assign. 1-1: 10 / 10

Assign. 1-2: 3 / 10

Assign. 1-3: 12 / 20
-------------------


UNIT 1 Grade: 62.6&#37;


UNIT 2

Assign. 2-1: 5 / 5

Assign. 2-2: 9 / 10

Assign. 2-3: 40 / 50
-------------------


UNIT 2 Grade: 83%


TOTAL GRADE: 79 / 105 = 75.2%



Then if the user unchecked assign. 1-2 their Unit 1 Grade would become 22/30 = 73.3% and their Total Grade would become 76 / 95 = 80%



Current code I'm playing around with (mostly from JMRKER)...
[code=html]
<!DOCTYPE html>
<html>
<body>

<form>
<input id="pts_earned_1" onclick="clickCh(this)" type="checkbox" value="10"> 10 / <input id="total_pts_1" type="hidden" value="12">12<br>
<input id="pts_earned_2" onclick="clickCh(this)" type="checkbox" value="12"> 12.5 / <input id="total_pts_2" type="hidden" value="14">14<br>
<br>
<input id="pts_earned_total" type="hidden" value="0">
<input id="total_pts" type="hidden" value="0">
<div id="pts_earned_display">Pts. Earned:</div>
</form>

<script type="text/javascript">
function clickCh(caller) {

var pts_earned = document.getElementById("pts_earned_total").value*1;
if(caller.checked){ pts_earned += caller.value*1; }
else { pts_earned -= caller.value*1; }
document.getElementById('pts_earned_total').value = pts_earned;
document.getElementById('pts_earned_display').innerHTML
= 'Pts. Earned: '+pts_earned.toFixed(2)+'<p>Grade: '+Math.round((pts_earned/total_pts)*100*10)/10+'%</p>';
}
</script>
</body>
</html>
[/code]


I'm thinking of having the clickCh function add/subtract the values of the "total_pts" input id's and then define a variable called total_pts, but I don't know how to do that since those values aren't in the input tag that's being checked.

Any ideas on this one? BTW, I'm not married to any of the above code, so feel free to hack away at it.
×

Success!

Help @gtilflm spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...