Question

<script type="text/javascript">
function appearbox(){
document.getElementById('hotelparoikia').style.display = 'block';
document.getElementById('desc1').style.display = 'block';
document.getElementById('desc2').style.display = 'block';
document.getElementById('typeofroom').style.display = 'block';
}
</script>

如您所见，以上是我的HTML文件中的javascript代码。

<form>
<table>
<tr><th>Επιλέξτε Περιοχή</th><th style="display:none;" id="desc1">Επιλέξτε ξενοδοχειακό συγκρότημα</th><th style="display:none;" id="desc2">Επιλέξτε τύπο δωματίου</th></tr>
<tr><td align="center">
<select id="hotelarea" onFocus="appearbox">
<option value="0" selected="selected" onFocus="appearbox" >ΠΑΡΟΙΚΙΑ</option>
<option value="1" onFocus="appearbox" >ΝΑΟΥΣΑ</option>
<option value="2" onFocus="appearbox" >ΧΡΥΣΗ ΑΚΤΗ</option>
<option value="3" onFocus="appearbox" >ΠΙΣΩ ΛΙΒΑΔΙ</option>
<option value="4" onFocus="appearbox" >ΑΛΙΚΗ</option>
</select>
</td>
<td align="center">
<select style="display:none;" id="hotelparoikia">
<option value="0" selected="selected">PAROS BAY HOTEL</option>
<option value="1">MARISA ROOMS</option>
<option value="2">AROKARIA BEACH</option>
<option value="3">REPPAS APARTMENTS</option>
<option value="4">VASSILIKI ROOMS</option>
</select>
</td>
<td align="center">
<select style="display:none;" id="typeofroom">
<option value="0" selected="selected">ΜΟΝΟΚΛΙΝΟ</option>
<option value="1">ΔΙΚΛΙΝΟ</option>
<option value="2">ΤΡΙΚΛΙΝΟ</option>
<option value="3">ΤΕΤΡΑΚΛΙΝΟ</option>
</select>
</td>
</tr>
</table>
</form>

这是我的HTML文件中代码的另一部分

正如你所看到的，当DropDownList是OnFocus时，应该运行并出现一些元素，并使一些元素可见，但它不会运行。任何人都可以帮助我吗？

Answer 1

你错过了（）

这里有很多关于使用jQuery，分离js逻辑等的建议，这些概念在概念上都是好主意。但据我所知，你的html的真正问题就在这里 - ＆gt;

<select id="hotelarea" onFocus="appearbox">

它必须是 - ＆gt;

<select id="hotelarea" onFocus="appearbox()">

因为emerbox只是一个函数引用。 ()本质上是说“运行引用指向的任何函数。”

除此之外，如果你确保你的<script>标签在头部（或者在表单之前将被加载的任何其他地方），它应该可以正常工作。

如果仍然无法正常工作，请在浏览器中打开开发人员控制台（可能是F12）并检查控制台，看看当您选择框时是否出现错误。我把你的代码几乎完全放在.html文件中（我将脚本标记放在head中，form标签放在body中，我还将（）添加到你的onFocus监听器。否则它是一个复制粘贴工作）它的工作原理，据我所知，问题是：

缺少（）
在创建onFocus侦听器时尚未加载脚本标记，您将收到未定义的错误
你网页上的其他一些东西正在做一些像写appearbox或其他东西一样时髦的东西 - 很不可能，但是，如果你按照html文件粘贴整个页面（或提供一个jsfiddle链接））然后你的回答者会有更好的帮助。

哦，这是另一个关于它可能是什么的想法（纯猜测，因为我看不到你页面的其余部分）。该表单是否在页面上出现多次？或者，由于任何其他原因，页面上是否有其他元素具有相同的ID？如果是这样，getElementById（）将无法返回一个元素; ID必须是页面唯一的。

Answer 2

onFocus="javascript:appearbox()"

但老实说，开始使用jQuery。从html中删除所有onFocus并将你的js替换为：

$(document).ready(function() {
  $("#hotelarea").focus(function() {
    $("#hotelparoikia").css("display", "block"); // or just .show()
    ...        
  });
});

Answer 3

以下代码对我很有用：

<select id="hotelarea" onFocus="javascript:appearbox();">

您不需要选项标签中的onFocus事件，只需在select标签内部使用一个。

Answer 4

很简单。

appearbox
// just a reference to the function

appearbox()
// call the function (with no arguments)

所以：

onFocus="appearbox();"

工作得很好。

无论我做什么，Javascript函数都不会执行

4 个答案: