如何從下拉菜單調用JavaScript功能

我正在學校項目上工作，我需要一些幫助。我總結了一個下拉菜單，允許用戶更改正在閱讀的文本的字體大小，字體類型和背景色。我的問題是，我無法讓我的功能運行。我對此很陌生，所以我不知道問題在於我如何嘗試調用它，或者我的功能有缺陷。如何從下拉菜單調用JavaScript功能

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

我只有在這裏的字體大小的功能，但我想它們都是相同的。英語不是我的第一語言，但我希望我已經足夠清楚。任何幫助將不勝感激。

來源

2015-10-07 Taerkel

你需要添加一個處理程序（它調用你的函數）的下降的變化下 – Thariama

Marcelo

您應該使用style.fontSize或樣式[font-size] – sdvnksv

你的代碼很好，但是你有一些語法錯誤。

您必須編寫的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>

來源

2015-10-07 12:19:05 Magus

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

來源

2015-10-07 12:22:35

這不回答問題。另外，你在jQuery中回答，而他的代碼是純javascript。 -1。 –

如何從下拉菜單調用JavaScript功能

回答

相關問題