如何从下拉菜单中调用JavaScript函数

Question

我正在做一个学校项目，需要一些帮助。 我应该做一个下拉菜单，该菜单允许用户更改他们正在阅读的文本的字体大小，字体类型和背景颜色。 我的问题是我无法运行我的功能。 我是新来的，所以我不知道问题是我如何尝试调用它，或者我的功能是否有缺陷。

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="dropdownmeny.css">
 <h1>Javascript</h1>

</head>

<body>
<p></p>
<nav>
   <ul>
    <li><a href="#">Font-size</a>
        <ul>
            <li><a href="#" onclick="liten()">15px</a></li>
            <li><a href="#" onclick="medium()">20px</a></li>
            <li><a href="#" onclick="stor()">25px</a>
            </ul>
        </li>   
    <li><a href="#">Font-type</a>
        <ul>
            <li><a href="#">Verdana</a></li>
            <li><a href="#">Times New Roman</a></li>
            <li><a href="#">Arial</a></li>
        </ul>
    </li>
    <li><a href="#">Bakgrunnsfarge</a>
        <ul>
            <li><a href="#">Rosa</a></li>
            <li><a href="#">Turkis</a></li>
            <li><a href="#">Gul</a></li>
        </ul>
    </li>
</ul>
</nav>
<p id=tekst style="background-color:pink; font-size: 15px; font-family: verdana">This text should change</p>
<script>function liten() {document.getElementById("tekst").style.font-size = "15px"; }</script>
<script>function medium() {document.getElementById("tekst").style.font-size = "20px"; }</script>
<script>function stor() {document.getElementById("tekst").style.font-size = "25px"; }</script>
</body>
</html>

我在这里仅具有字体大小的功能，但我想所有这些功能都相同。 英语不是我的母语，但我希望我已经足够清楚了。 任何帮助将不胜感激。

Answer 1

您的代码不错，但是有一些语法错误。

您必须写id="tekst"而不是id=tekst
font-size在javascript中不是有效的标识符（由于- ），因此您必须使用数组符号来访问它。

这是一个工作示例：

 <!DOCTYPE html> <html> <head> <h1>Javascript</h1> </head> <body> <p></p> <nav> <ul> <li><a href="#">Font-size</a> <ul> <li><a href="#" onclick="liten()">15px</a></li> <li><a href="#" onclick="medium()">20px</a></li> <li><a href="#" onclick="stor()">25px</a> </ul> </li> <li><a href="#">Font-type</a> <ul> <li><a href="#">Verdana</a></li> <li><a href="#">Times New Roman</a></li> <li><a href="#">Arial</a></li> </ul> </li> <li><a href="#">Bakgrunnsfarge</a> <ul> <li><a href="#">Rosa</a></li> <li><a href="#">Turkis</a></li> <li><a href="#">Gul</a></li> </ul> </li> </ul> </nav> <p id="tekst" style="background-color:pink; font-size: 15px; font-family: verdana">This text should change</p> <script>function liten() {document.getElementById("tekst").style['font-size'] = "15px"; }</script> <script>function medium() {document.getElementById("tekst").style['font-size'] = "20px"; }</script> <script>function stor() {document.getElementById("tekst").style['font-size'] = "25px"; }</script> </body> </html>

Answer 2

这是在下拉菜单中调用更改事件的方法。

 $(document).on('change', 'select', function(){ alert($(this).find('option:selected').text()); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>A</option> <option>B</option> <option>C</option> </select>

如何从下拉菜单中调用JavaScript函数

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-10-07 12:19:05

解决方案2
-2 2015-10-07 12:22:35

如何从下拉菜单中调用JavaScript函数

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-10-07 12:19:05

解决方案2 -2 2015-10-07 12:22:35

解决方案1
1 已采纳 2015-10-07 12:19:05

解决方案2
-2 2015-10-07 12:22:35