分离式javascript取当前element值的代码

下面是关于“分离式javascript取当前element值的代码”的攻略。

什么是分离式javascript

分离式javascript是网页开发中常用的一种技术，它将网页中的代码和行为分离开来，使得代码更易于维护和管理。一般来说，分离式javascript代码会以单独的.js文件的形式存放在服务器上，例如：

<script src="js/myscript.js"></script>

如何取当前element值

如果需要在javascript中获取当前元素的值（例如当前选中的下拉列表项、当前选中的单选按钮等）可以使用如下代码：

var value = this.value;

其中"this"关键字代表当前元素，".value"代表当前元素的值。例如取得下拉列表中当前选中项的值可以使用如下代码：

var selectElm = document.getElementById("mySelect");
var selectedValue = selectElm.options[selectElm.selectedIndex].value;

示例说明

示例1：取当前选中的单选按钮的值

HTML代码：

<input type="radio" name="gender" value="male" onclick="getSelectedValue()"> Male<br>
<input type="radio" name="gender" value="female" onclick="getSelectedValue()"> Female<br>

Javascript代码：

function getSelectedValue() {
    var selectedValue = document.querySelector('input[name="gender"]:checked').value;
    alert(selectedValue);
}

在这个示例中，我们使用了document.querySelector()方法来获取当前被选中的单选按钮的值，如果选中的是Male，弹出的提示框中就显示"male"，如果选中的是Female，弹出的提示框中就显示"female"。

示例2：取当前选中的下拉列表项的值

HTML代码：

<select id="mySelect" onchange="getSelectedValue()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Javascript代码：

function getSelectedValue() {
    var selectElm = document.getElementById("mySelect");
    var selectedValue = selectElm.options[selectElm.selectedIndex].value;
    alert(selectedValue);
}

在这个示例中，我们在下拉列表的"onchange"事件中调用了"getSelectedValue()"函数，该函数使用了"document.getElementById()"方法获取下拉列表元素，并使用options和selectedIndex属性来获取当前选中的选项的值。如果选中的是Volvo，弹出的提示框中就显示"volvo"，如果选中的是Saab，弹出的提示框中就显示"saab"，以此类推。

综上所述，这就是分离式javascript获取当前element值的完整攻略。