如何解决为什么不读取对象中的输入值?
我正处于学习阶段,我正在研究一些旧的小型项目,并试图将旧的功能编程转移到OOP。在下面的这种情况下,我可以想象基于项目的简单性,使用基本功能会更容易,但是我只是想将其更改为OOP,所以我开始了解两者之间的区别。我遇到的问题是,尽管我有一个指向convert函数的输入onclick事件,但是当我将numberBox.value分配给我的years属性时,它仍将其读取为null(加载页面时的值),手动读取numberBox的值就很好了,并按输入的每个Event键更改每个键的输入。为什么它不能在我的物体中识别出它?
const numberBox = document.querySelector('#years');
const days = document.querySelector('#days');
const hours = document.querySelector('#hours');
const minutes = document.querySelector('#minutes');
numberBox.addEventListener('input',convert );
let converter = {
years: numberBox.value,toDays: function () {
return this.years*365;
},toHours: function () {
return this.years*8760;
},toMinutes: function () {
return this.years*525600;
}
};
function convert () {
days.lastElementChild.innerHTML = converter.toDays();
hours.lastElementChild.innerHTML = converter.toHours();
minutes.lastElementChild.innerHTML = converter.toMinutes();
}
下面是我更改为OOP之前的旧功能代码。我以为两者都可以工作,但看来我错了。谢谢
function convert () {
let years = numberBox.value; // could also use THIS.value as this is the box i am inputting on
days.lastElementChild.innerHTML = years * 365;
hours.lastElementChild.innerHTML = years * 8760;
minutes.lastElementChild.innerHTML = years * 525600;
}
解决方法
-
numberBox.value
=>Number(numberBox.value)
。始终将文本值转换为适当的类型! -
function convert () {...}
添加到函数converter.years = Number(numberBox.value)
中,否则可以使用converter.years
属性,但切勿从输入中为其分配更新值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。