javascript - 下拉菜单功能不选择字体大小

Question

我的下拉菜单在单击时不会更改字体大小。

<div> <h1 id="h1">This is text Aligned !!!</h1><div>

        <select> 
            <option>Size</option>
        <option value="10" id ="ten" onclick="btn1">10</option>
        <option value="20" id ="tw" onselect="btn2">20</option>
        <option value="30" id ="th" onclick="btn3" >30</option>
        <option value="40" id = "fo" onclick="btn4">40</option>
        <option value="50" id = "fi" onclick="btn5">50</option>
    </select>
    </div>

    <script>

    function btn1() {
        document.getElementById("h1").value = "10px";

    }

    </script>

控制台上没有显示错误

Answer 1

• 不要使用内联 JavaScript
• 如果您只需要一个函数，请不要使用多个函数，即:change_size()
• 您始终设置为 "10px"而是使用this.value + 'px'
• 使用.style.fontSize而不是value
• 将 ID 添加到您的 <select>元素即:is="size"并在 JS 中定位它
• 使用.addEventListener()
• 使用属性selected disabled对于默认提示选项

function change_size() {
  document.querySelector("#h1").style.fontSize = `${this.value}px`;
}

document.querySelector('#size').addEventListener('change', change_size);

<select id="size">
  <option selected disabled>Size</option>
  <option>10</option>
  <option>20</option>
  <option>30</option>
  <option>40</option>
  <option>50</option>
</select>

<h1 id="h1">TEST</h1>