onload事件未触发-JS

Question

Problem 问题

So, my problem is that when I call my window.onload = app.setup , I want to append 0 to the elements with the classes of min and sec . 所以，我的问题是，当我调用window.onload = app.setup ，我想在min和sec类的元素后追加0。

What I'm getting 我得到什么

<h1><span class="min"></span> : <span class="sec"></span></h1>

What I want 我想要的是

<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>

Answer 1

document.getElementsByClassName returns a HTMLCollection (multiple elements) not just one element. document.getElementsByClassName返回一个HTMLCollection （多个元素），而不仅仅是一个元素。

Try this: 尝试这个：

setup() {
    document.getElementsByClassName("min")[0].innerHTML = this.mins.toString();
    document.getElementsByClassName("sec")[0].innerHTML = this.secs.toString();
}

Also, because you're trying to access properties of the Main class inside the setup function you'll have to bind the Main instance to the function. 另外，由于您试图访问setup函数中Main类的属性，因此必须将Main实例绑定到该函数。

window.onload = app.setup.bind(app);

onload事件未触发-JS

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-04-19 23:24:47

onload事件未触发-JS

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-19 23:24:47

解决方案1
1 已采纳 2017-04-19 23:24:47