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

我是编程方面的新手，所以我的这个问题可能似乎不相关。我想知道如何使用原始JavaScript而不是jQuery来隐藏和显示html元素。由于我是一个总开始，我想我必须先学习原始JavaScript，然后才能跳入像jQuery这样的库。如何显示和隐藏一个元素，使用JavaScript（而不是jQuery）将值从javascript传递给html元素？

首先我将粘贴代码...

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 .= "&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

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显示的唯一时间。

来源

2011-05-13 Newbie Coder

我不太确定你在找什么，有些问题对我来说并不清楚。如果您说隐藏或显示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

来源

2011-05-13 02:34:01 ace

首先，我会担心使用var事件，而不是一个保留字以后的开发人员可能会略微偏离均衡看到它在非DOM事件使用。

然后开始你的页面了，设置的div visibility：hidden的

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

的代码：

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';

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

我发现apples DOM script intro对纯js dom操作非常有帮助。

来源

2011-05-13 02:34:09 WSkid

非常感谢您的建议...... NEXT我会小心地命名一些元素或给变量名称。 – 2011-05-13 02:39:18

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

回答

相关问题