gpt4 book ai didi

javascript - 如何显示和隐藏元素,使用 JavaScript(不是 jQuery)将值从 JavaScript 传递到 html 元素?

转载 作者:行者123 更新时间:2023-11-30 13:33:06 24 4
gpt4 key购买 nike

我是编程新手,所以我的这个问题似乎无关紧要。我想知道如何使用原始 JavaScript 而不是 jQuery 来隐藏和显示 html 元素。因为我是一个完全的初学者,所以我认为在进入 jQuery 等库之前我必须学习原始的 JavaScript。

首先我会粘贴代码:

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

最佳答案

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

关于javascript - 如何显示和隐藏元素,使用 JavaScript(不是 jQuery)将值从 JavaScript 传递到 html 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5986609/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com