...

View Full Version : show/hide Div Tag



jace_co_uk
03-01-2012, 08:16 PM
ok trying to get a Div tag to show if something is True and hide if something is False

JS


unction eToggle(anctag,darg)
{
var ele = document.getElementById('Module1');
var ele = document.getElementById('Module2');
var ele = document.getElementById('Module3');
var ele = document.getElementById('Module4');


if("module1" + "module2" + "module3" + "module4" <40)
{
div.id.Failed = "block";
div.Failed = "Failed";
}
else
{
div.style.Passed = "block";
div.Passed = "show";
}
}



HTML


<div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b>
<br />
</div>

<div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div>

Philip M
03-01-2012, 09:00 PM
div.Passed = "show";

div.id.Failed = "block";

document.getElementById("Fail").style.display = "block";

You cannot give several variables the same name.


var m1 = Number(document.getElementById('Module1').value) || 0;
var m2 = Number(document.getElementById('Module2').value) || 0;
var m3 = Number(document.getElementById('Module3').value) || 0;
var m4 = Number(document.getElementById('Module4').value) || 0;
if (m1 + m2 + m3 + m4 <40) { // items in quotes are literals, not variables
document.getElementById("Fail").style.display = "block";
}


"If you can't explain it simply, you don't understand it well enough”
“Everything should be as simple as it is, but not simpler.”
- both quotes Albert Einstein (German born American Physicist who developed the special and general theories of relativity. Nobel Prize for Physics in 1921. 1879-1955)

jace_co_uk
03-01-2012, 09:59 PM
doesnt seem to be able to display the text..

would it still display even if i set the Div Tag to Display None?


i have already declared the Modules at the top of the JS



var module1 = document.getElementById('module1');
var module2 = document.getElementById('module2');
var module3 = document.getElementById('module3');
var module4 = document.getElementById('module4');



would i still have to include the



var m1 = Number(document.getElementById('Module1').value) || 0;
var m2 = Number(document.getElementById('Module2').value) || 0;
var m3 = Number(document.getElementById('Module3').value) || 0;
var m4 = Number(document.getElementById('Module4').value) || 0;



var m1 = Number(document.getElementById('Module1').value) || 0;
var m2 = Number(document.getElementById('Module2').value) || 0;
var m3 = Number(document.getElementById('Module3').value) || 0;
var m4 = Number(document.getElementById('Module4').value) || 0;
if (m1 + m2 + m3 + m4 <40) { // items in quotes are literals, not variables
document.getElementById("Fail").style.display = "block";
}
else
if (m1 + m2 + m3 + m4 >40){
document.getElementById("Passed").style.display = "block";
}
}

webdev1958
03-02-2012, 05:18 AM
Are your module elements input text boxes or some other type of element. I am assuming they are input boxes.

Below is the basic concept. You will need to validate the module values if they are inputted and you will need something (event) that calls showHideResults().



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#Fail, #Passed {
display: none;
}
</style>
<script type="text/javascript">
function showHideResults(){
var mod1Val = document.getElementById('module1').value;
var mod2Val = document.getElementById('module1').value;
/*
Validate the above values here and convert from string to numbers
*/
if(mod1Val + mod2Val < 40){ //failed
document.getElementById('Fail').style.display='block';
document.getElementById('Passed').style.display='none';
} else { //passed
document.getElementById('Fail').style.display='none';
document.getElementById('Passed').style.display='block';
}
}
</script>
</head>
<body>
<div id="Fail" ><b><i>You will need to Repeat the Semester!</i></b>
<br />
</div>
<div id="Passed">
<img src="faces.png" width="50" height="50" />
<b><i> "Good Job you passed the Semster!"</i></b>
</div>
</body>
</html>


You certainly shouldn't be using inline styles and you don't need the classes if those are the only 2 elements in the class.

jace_co_uk
03-02-2012, 08:11 PM
OK i got this working

but its adding the Values and if all the values added is <40 it shows div Fail else it shows div Passed

what i am looking for is not to Add the all Values but if i enter in less then 40 in one module text box and the rest are above 40 it should show Div Fail

if all Module Boxes are above 40 show div Passed..

what way do i need to go about the JS to get what im looking for

jace_co_uk
03-02-2012, 08:16 PM
got it working

if ((m1 <40) || (m2 <40) ) {



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum