问题
所以，我的问题是，当我调用我的 window.onload = app.setup 时，我想将 0 附加到具有 min 和 秒。
我得到了什么
<h1><span class="min"></span> : <span class="sec"></span></h1>
我想要什么
<h1><span class="min">0</span> : <span class="sec">0</span></h1>
// main class
class Main {
constructor() {
// stores time
this.mins = 0;
this.secs = 0;
// stores users inputs
this.workHours = null;
this.restHours = null;
}
// sets up html
setup() {
document.getElementsByClassName("min").innerHTML = toString(this.mins);
document.getElementsByClassName("sec").innerHTML = toString(this.secs);
}
}
let app = new Main();
window.onload = app.setup;@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
* {
margin: 0;
padding: 0;
}
*::selection {
background-color: #333;
color: #fff;
}
.container {
width: 60%;
margin: 0 auto;
}
.clock {
padding: 20px;
text-align: center;
}
.clock h1 {
color: #333;
font: 500 1.8em Roboto;
}
.controls {
text-align: center;
padding: 20px;
}
.inputs input{
width: 40%;
margin: 10px;
padding: 14px;
border: none;
outline: none;
font: 400 1em Roboto;
border-bottom: 3px solid #fff;
transition: border-color 200ms ease-in-out;
-webkit-transition: border-color 200ms ease-in-out;
-o-transition: border-color 200ms ease-in-out;
-moz-transition: border-color 200ms ease-in-out
}
.inputs input:focus {
border-color: #333;
}
.buttons {
padding: 10px;
}
.buttons button {
padding: 15px;
width: 20%;
margin: 10px;
border: none;
outline: none;
color: #fff;
font: 500 1em Roboto;
cursor: pointer
}
.buttons button:nth-child(1) {
background-color: rgba(0, 0, 200, 0.6);
}
.buttons button:nth-child(2) {
background-color: rgba(0, 200, 0, 0.6);
}
.buttons button:nth-child(3) {
background-color: rgba(200, 0, 0, 0.6);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pomodoro Clock</title>
</head>
<body>
<div class="container">
<div class="clock">
<h1><span class="min"></span> : <span class="sec"></span></h1>
</div>
<div class="controls">
<div class="inputs">
<input type="text" placeholder="Minutes of work">
<input type="text" placeholder="Minutes of rest">
</div>
<div class="buttons">
<button class="play"><i class="fa fa-play" aria-hidden="true"></i></button>
<button class="pause"><i class="fa fa-pause" aria-hidden="true"></i></button>
<button class="reset"><i class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
</div>
</div>
<script src="https://use.fontawesome.com/e99695fe86.js"></script>
</body>
</html>最佳答案
document.getElementsByClassName 返回一个 HTMLCollection(多个元素)而不仅仅是一个元素。
试试这个:
setup() {
document.getElementsByClassName("min")[0].innerHTML = this.mins.toString();
document.getElementsByClassName("sec")[0].innerHTML = this.secs.toString();
}
此外，因为您正试图在 setup 函数中访问 Main 类的属性，所以您必须绑定(bind) Main函数的实例。
window.onload = app.setup.bind(app);
关于javascript - onload 事件未触发 - JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43507674/