如何显示和隐藏元素，使用JavaScript(不是jQuery)将值从javascript传递到html元素? [英] How to show and hide an element, pass values from javascript to html element using JavaScript (not jQuery)?
问题描述
我是编程的新手，所以我的这个问题似乎无关紧要.我想知道如何使用原始JavaScript而不是jQuery隐藏和显示html元素.由于我是一个初学者，所以我认为我必须学习原始的JavaScript，然后再跳入jQuery之类的库.
I am total newbie to programming so this question of mine might seems irrelevant. I wanna know how to hide and show a html element using the original JavaScript not jQuery. Since Im a total beginer I think I have to learn the primitive JavaScript before jumping into some libraries like jQuery.
首先，我将粘贴代码...
First of all I'll paste the codes...
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"
}
}
}
我想发生的是，当用户更改任何选择元素的值时，它将自动检查该组合是否存在.如果存在，它将把数组的内容发送到div，这是div唯一显示的时间.
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.
推荐答案
我不太确定您要查找的内容，有些问题对我来说还不清楚.如果您说隐藏或显示div，则可以更改div的样式.
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
这篇关于如何显示和隐藏元素，使用JavaScript(不是jQuery)将值从javascript传递到html元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
