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

How to call a JavaScript function from drop down menu

本文关键字：JavaScript 函数 调用 下拉菜单      更新时间：2023-09-26

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

<!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>

我这里只有font-size的函数，但我想所有的函数都是一样的。英语不是我的母语，但我希望我已经说得够清楚了。任何帮助都将不胜感激。

你的代码很好，但是你有一些语法错误。

  • 必须写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>

如何在下拉菜单中调用change event 

$(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>

相关文章：