javascriptでdivで時計を表示

Question

私はこの時計を私のSPAに表示することができないので、ここでは灰色の髪になっています。私はページに表示されるべき時計を持っていますが、それを正しく得ることはできません。私はコースで教えたことを試しましたが、それを正しくすることはできません。あなたはそれを見て、おそらく手を貸してください。 console.logも出力されません。

Clock.jsにおけるコード：

function clock() { 
    let now = new Date() 
    let h = now.getHours() 
    let m = now.getMinutes() 
    let s = now.getSeconds() 

    m = checkTime(m) 
    s = checkTime(s) 

    let target = document.querySelector('#footer-clock') 
    let clockText = document.createTextNode(h + ':' + m + ':' + s) 
    target.appendChild(clockText) 

    setInterval(clock, 500) 
} 

function checkTime (i) { 
    if (i < 10) { 
    i = '0' + i 
    } 
    return i 
} 

module.exports = clock 

コードapp.jsで：

const clock = require('./clock.js') 

document.querySelector('#footer-clock').onload = function() { 
    clock() 
    console.log('Loaded') 
} 

そして、私が持っているHTMLに：

footer> 
    <div id="footer-clock"> 

    </div> 
</footer> 

Answer 1

ブラウザは何を理解していません

module.exports = {} 
const clock = require('./clock.js') 

あなたはクロームでデベロッパーツールでコンソールを見ればあなたもcommonjsモジュール をバンドルして使用するためのwebpackのようなものを使用する場合、これは動作します、あなたは

Uncaught ReferenceError: require is not defined

このエラーが表示されます。なお、次の場合には、使用してサイトを開発あなたが任意の場所そうで利用できるようになりますclock.jsになりました。この

<script src="app.js"></script> 
<script src="clock.js"></script> 

コードのようなスクリプトタグ で任意のスクリプトを入れてするHTMLapp.jsあなたもあなたの代わりに[方法の

document.querySelector('#footer-clock').onload = function() { 
clock() 
console.log('Loaded') 
} 

here you can learn more about global events