0

エクスプレスの基本を学んでいるだけで、ノードでフロントエンドアプリケーションを提供しようとしています。私が抱えている問題は、SRC を介して html にリンクした JavaScript が DOM にアクセスできないことです。console.log(document) の場合、ドキュメント オブジェクト全体を文字列として表示できますが、フォームや本文などの内部にアクセスしようとすると、NULLが返されます。ヌルヌルヌルヌルヌル。たとえば、 console.log( document.getElementById('input') ) はブラウザーに null を記録しますが、 console.log(document) はドキュメントをブラウザーに記録します。同じ方法でロードされた私の CSS は問題なく動作します。どうしてこれなの？それを回避する方法は？

パス: weather/src/weather.html

html:

<!doctype html>

<head>
  <title>The Weather</title>
  <meta charset='utf-8'>
  <script type='text/javascript' src='/weather.js'></script>
  <link rel='stylesheet' type='text/css' href='weather.css'/>
</head>
<body>
  <div id='entry'>
    <h1>Weather</h1>
    <form name='add_address' action='#'>
      <input id="input" name='address' type='text' placeholder='Street Address, Zip, State' maxlength='60'>
    </form>
  </div>
</body>

パス: weather/router.js

Router.js:

 const path = require('path'),
  express = require('express'),
  router = express.Router(),
  bodyParser = require('body-parser'),
  app = express(),
  port = 3000

app.listen(port)

router.get( '/weather', (req, res)=>{
   res.sendFile(path.join( __dirname + '/src/weather.html' ))
})
router.get( '/weather.css', (req, res)=>{
  res.sendFile(path.join( __dirname + '/src/weather.css' ))
})

app.get('/weather.js', (req, res) => {
  res.sendFile(path.join( __dirname + '/src/weather.js'))
})
app.use('/', router)
4

1 に答える 1