如何显示和隐藏元素，使用JavaScript（而不是jQuery）将值从javascript传递到html元素？

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.

我是编程的全新手，所以我的这个问题似乎无关紧要。我想知道如何隐藏和显示使用原始JavaScript而不是jQuery的html元素。由于我是一个完全开始的人，我想我必须先学习原始的JavaScript，然后才能进入像jQuery这样的库。

First of all I'll paste the codes...

首先我会粘贴代码......

index.php

的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

的functions.php

<?php
 function hspacer($num_of_spaces) {
  $spaces = "";
  if ($num_of_spaces > 0)  for($i=0; $i<$num_of_spaces; $i++ )  $spaces .= "&nbsp;";

  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

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.

我想要发生的是，当用户更改任何select元素的值时，它将自动检查组合是否存在。如果有，它会将数组的内容发送到div，这是div显示的唯一时间。

2 个解决方案

#1

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.

我不太确定你在找什么，有些问题我不清楚。如果你说隐藏或显示div，你可以改变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

#2

First, I'd be worried about using the var event, while not a reserve word future developers may get slightly off-balanced to see it in a non DOM-event usage.

首先，我担心使用var事件，而不是保留字，未来开发人员可能会稍微失衡，以便在非DOM事件使用中看到它。

Then to start your page off, set that div to visibility:hidden

然后关闭页面，将div设置为visibility：hidden

<div id="show_description" style="visibility:hidden;"></div>

For the code:

对于代码：

var targetNode = document.getElementById('show_description');
var children = targetNode.childNodes;
for(var i=0,len=children.length;i<len;i++){
   targetNode.removeChild(children[i]);
}
var newNode = document.createTextNode(year+" "+event);
targetNode.appendChild(newNode);
targetNode.style.visibility = 'visible';

Basically the above selects the div where you want the content to go. Then removes anything inside of it, lastly it creates a new text node of your selected year and event and appends that into the div.

基本上，上面选择了你想要内容的div。然后删除其中的任何内容，最后它会创建所选年份和事件的新文本节点，并将其附加到div中。

I've found apples DOM script intro to be very helpful for pure js dom manipulating.

我发现苹果DOM脚本介绍对于纯js dom操作非常有帮助。

#1