JavaScript如何使用"；这"；使用onchange事件并选择元素

我的html中有几个select标记和div：

<div>
    <select name="one" id="oneId" class="selectOne" onchange="myFunction()">
        <option value="" disabled selected>choose*</option>
        <option value="1">Yes</option>
        <option value="2">No</option>
    </select>
    <div class="show" style="display:none;">
        <input type="number" value="" id="other"></input>
    </div>
</div>

函数myFunction（）{
var a=this.value；//选择此函数的“选择标记”
var b=this.closest（“show”）；//选择最近的“show div”来选择标记
var c=b.children；//输入//在“show div”中选择输入
如果（a==1）{
b、 style.display=“block”；
c、 删除属性（“禁用”）；
}否则{
b、 style.display=“无”；
c、 setAttribute（'disabled'，'disabled'）；
}
}

选择*
对
不

此

指的是

onchange

函数中的select元素

您正在从该函数调用

myFunction（）

，因此，

此

将成为

窗口

内部的

myFunction

如果要传递元素，则需要显式传递（作为参数或使用

apply

或

call

）

---

更好的是，不要使用内部事件属性（有各种各样的问题），而是使用

addEventListener

---

一旦你解决了这个问题，你会发现你使用的

最近的

是完全错误的

它搜索祖先而不是兄弟（因此您可能希望使用

this.parentElement.querySelector

），就像

querySelector

一样，它需要一个选择器而不是简单的类名。

引用事件目标

此

将根据侦听器函数添加到元素的方式而有所不同

您可以使用添加侦听器

<代码>此将是添加到的元素

…–其中

的
事件
是实际的事件名称<代码>此

将是添加到的元素

…内联

onevent

侦听器（例如，使用HTML属性

onchange=“myFunction（）”

）<代码>此将是全局对象，请参阅

出于多种原因，通常建议使用

EventTarget.addEventListener（）

。以下是您应该使用它的两个原因：

它允许添加多个侦听器，而不是仅添加一个侦听器

使用它将使您的HTML远离JavaScript，将功能与结构分离。使用JavaScript添加功能，而不是HTML

下面是一个示例，演示了添加侦听器的方法：

document.querySelector（'button'）。addEventListener（'click'，log）；//案例1
document.querySelector（'按钮：第n个子（2）'）。onclick=log；//案例2
函数日志（）{
log（（this===globalThis？'this'是'globalThis'：this））；
}

使用addEventListener（）
使用Element.onclick
使用OneEvent侦听器

也许您应该忘记内联侦听器，看看.Change

this.closest（“show”）到
这个最近的（“.show”）
as
.closest（）
采用CSS选择器，
show
是一个类，而不是一个元素。查找祖先，但该
div.show
是您的
select
元素的同级。只需使用
this.nextElementSibling
。您应该了解并了解如何使用传递的对象。这就解决了侦听器函数中的
这个
问题。
function myFunction() {
    var a = this.value; // to select this "select tag" of this function
    var b = this.closest("show"); // to select closest "show div" to select tag
    var c = b.children; //input // to select input in "show div"

    if (a == 1) {
        b.style.display = "block";
        c.removeAttribute("disabled");
    } else {
        b.style.display = "none";
        c.setAttribute('disabled','disabled');
    }
}