Javascript texbox输入值已填充,但返回空/未定义
我是javascript/typescript新手,我正在尝试为我的文本输入小部件创建一个浮动标签。如果文本框包含一个值,我想添加一个CSS“active”类,以便为文本框添加一些样式 下面是我检查文本框是否包含值的部分代码。我不明白它为什么失败Javascript texbox输入值已填充,但返回空/未定义,javascript,typescript,input,textbox,floating-labels,Javascript,Typescript,Input,Textbox,Floating Labels,我是javascript/typescript新手,我正在尝试为我的文本输入小部件创建一个浮动标签。如果文本框包含一个值,我想添加一个CSS“active”类,以便为文本框添加一些样式 下面是我检查文本框是否包含值的部分代码。我不明白它为什么失败 //Structure texbox input widget <div class="mx-textbox"> <label class="control-label"> </
//Structure texbox input widget
<div class="mx-textbox">
<label class="control-label"> </label>
<input class="form-control" value="Best">
</div>
当我检查我的控制台时,我可以看到为我的文本框找到的值,但是如果我尝试检查该值,它似乎是空的?
有人能告诉我怎么做或者如何正确地检查它吗?我想如果条件是你应该检查inputElement.value,那么它只会在inputElement有值时执行块。为什么你要在forEach(元素:HTMLInputElement)中将“元素”赋值给“HTMLInputElement”。。。使用您用代码粘贴的HTML,它工作得很好。@MBB您是对的,没有必要这样做。我删除了“:HTMLInputElement”部分。因为我使用的是typescript,所以需要分配一些部分,但不用于此元素。您的代码运行良好-@MBB我调试了它,并且值检查似乎执行得太快。在调试器中,输入值为空。当调试器完成时,该值似乎在那里。你知道我怎样才能等到数据加载到我的文本框小部件中吗?
//Part of my code for adding an 'active' class to my textbox div
init = () => {
const floatContainers = document.querySelectorAll('.mx-textbox');
floatContainers.forEach((element: HTMLInputElement) => {
element.classList.add('floatLabel');
const inputElement = element.querySelector('input');
if (inputElement) {
console.log(inputElement);
console.log("value for " + inputElement.id + " is " + inputElement.value);
if (inputElement.value) {
element.classList.add('active');
}
}
this.bindEvents(element);
});
};