Issue
I am new to programming so this question of mine might seems irrelevant. I want to know how to hide and show a html element using the original JavaScript not jQuery. Since I'm a total beginner I think I have to learn the primitive JavaScript before jumping into some libraries like jQuery.
First of all I'll paste the code:
index.php
<html>
<head>
<script type="text/javascript" src="myscripts.js"></script>
<style type='text/css'>
#show_description {
min-height: 100px;
min-width: 500px;
max-height: 100px;
max-width: 500px;
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div>
<form name="myform" action="index.php" method="get" >
Select Year: <?php echo hspacer(1); ?>
<select id="year_list" name="year_list" onchange="check_year_event();" >
<?php
for($year = (date('Y') - 100); $year <= (date('Y') + 100); $year++ ) {
if ($year == date('Y')) echo "<option value='$year' name='$year' selected='' >" . $year . "</option>";
else echo "<option value='$year' name='$year' >" . $year . "</option>";
}
?>
</select>
<?php echo hspacer(5); ?>
Select Event: <?php echo hspacer(1); ?>
<select id="event_list" name="event_list" onchange="check_year_event();" >
<?php
$events = array("Karate Tournament", "Beauty Pageant", "Film Festival", "Singing Contest", "Wedding");
foreach($events as $event) echo "<option value='$event' name='$event' >" . $event . "</option>";
?>
</select>
<?php echo vspacer(2); echo hspacer(22); ?>
<input type="submit" id="add_description" value="Add Description" onclick="show(); "/>
</form>
</div>
<div id="show_description">
</div>
</body>
</html>
functions.php
<?php
function hspacer($num_of_spaces) {
$spaces = "";
if ($num_of_spaces > 0) for($i=0; $i<$num_of_spaces; $i++ ) $spaces .= " ";
return $spaces;
}
function vspacer($num_of_linefeeds) {
$linefeeds = "";
if ($num_of_linefeeds > 0) for($i=0; $i<$num_of_linefeeds; $i++ ) $linefeeds .= "<br />";
return $linefeeds;
}
?>
myscripts.js
function create2DArray(row, col){
var array2D = new Array(row);
for (var i = 0; i < row; i++) {
array2D[i] = new Array(col);
}
return array2D;
}
function check_year_event() {
var years_and_events = create2DArray(10, 3);
years_and_events[0][0] = 2001;
years_and_events[0][1] = "Karate Tournament";
years_and_events[0][2] = "Annual karate tournament held globally";
years_and_events[1][0] = 2002;
years_and_events[1][1] = "Beauty Pageant";
years_and_events[1][2] = "Beauty pageant held globally";
years_and_events[2][0] = 2003;
years_and_events[2][1] = "Film Festival";
years_and_events[2][2] = "Film festival held globally";
years_and_events[3][0] = 2004;
years_and_events[3][1] = "Singing Contest";
years_and_events[3][2] = "Singing contest tournament held globally";
years_and_events[4][0] = 2005;
years_and_events[4][1] = "Wedding";
years_and_events[4][2] = "Wedding tournament held globally";
years_and_events[5][0] = 2007;
years_and_events[5][1] = "Karate Tournament";
years_and_events[5][2] = "Annual karate tournament held globally";
years_and_events[6][0] = 2008;
years_and_events[6][1] = "Beaty Pageant";
years_and_events[6][2] = "Beauty pageant held globally";
years_and_events[7][0] = 2009;
years_and_events[7][1] = "Film Festival";
years_and_events[7][2] = "Film festival held globally";
years_and_events[8][0] = 2010;
years_and_events[8][1] = "Singing Contest";
years_and_events[8][2] = "Singing contest tournament held globally";
years_and_events[9][0] = 2011;
years_and_events[9][1] = "Wedding";
years_and_events[9][2] = "Wedding tournament held globally";
var year = document.getElementById('year_list').value;
var event = document.getElementById('event_list').value;
for (var i = 0; i < years_and_events.length; i++) {
if ((year == years_and_events[i][0]) && (event == years_and_events[i][1])) {
// This is where I want to put the command to show and hide the div with id = "show_description"
}
}
}
What I want to happen is that when the user changes the value of any of the select element it will automatically check if the combination exists. If there is, it will send the content of the array to the div and that's the only time the div will show.
Solution
I'm not pretty sure to what you looking for, some question aren't clear to me. If you say hide or show a div, you can change the style of the div.
//Using visibility
if(show){
document.getElementById('show_description').style.visibility = "visible";
} else {
document.getElementById('show_description').style.visibility = "hidden";
}
//Using display
.style.display = "block"; //To show
.style.display = "none"; //To hide
Answered By - ace
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.