別のHTMLファイルから要素を取得する方法

-1

私はnode.jsアプリケーションをHTMLファイルのテキストボックスから入力するようにしようとしています。私は配列にこの値を格納したいと思いますが、どうすればよいか分かりません。私の全体的な目標は、チャットアプリケーションを作ることです.HTMLファイルを参照することなく入力を取得する簡単な方法があると仮定します。別のHTMLファイルから要素を取得する方法

また、HTMLファイル用のテンプレートはありますか？うまくいくようなWebページを作るためにHTMLで十分に熟練していないからです。だから私が使うことができるテンプレートがあれば、すべてが良く見えるだろう。

マイコード：感謝

var events = require('events'); 
 
var express = require('express'); 
 
var http = require('http'); 
 
var app = express(); 
 

 
var msg = []; 
 

 
app.get('/', function(req, res) { 
 
    res.sendFile(__dirname + '/index.html'); 
 
}); 
 

 
app.read('/', function() { 
 

 
}); 
 

 
app.listen(3000, function() { 
 
    console.log("Server is running on port " + 3000); 
 
});

#firstHead { 
 
    font-family: Georgia, 'Times New Roman', Times, serif; 
 
}

<header> 
 
    <h1 id='firstHead'> 
 
    This is a header! 
 
    </h1> 
 
</header> 
 
<body> 
 
    <input type="text" id="inText" placeholder="Enter text here" /> 
 
</body>

ヘルプ！

出典

2017-09-02 LawlessWalrus

ヘッダーはbodyタグの内側にある必要があります –

チャットアプリケーションを作成したい場合は、より適切な方法があります。 https://socket.io/などの技術をご覧ください。 – jmargolisvt

さて、私はちょうどそれを行うだろう、私はちょうどあなたがHTMLでテキストボックスを作る必要があるかどうか分からなかった、助けてくれてありがとう！ – LawlessWalrus

まず、HTMLコードには多くの間違いがあります。このコードの正しいバージョン（あなたがそれを使用されることはありません、それはあなたがやったミスのアイデアを与えるためにだけです）：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
     #firstHead { 
 
      font-family: Georgia, 'Times New Roman', Times, serif; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <h1 id='firstHead'> 
 
       \t This is a header! 
 
      \t </h1> 
 
    <form id="msg" method="GET" action="/msg"> 
 
     <input type="text" name="msgContent" id="inText" placeholder="Enter text here" /> 
 
     <input type="submit" value="Send"> 
 
    </form> 
 
</body> 
 

 
</html>

今、このHTMLページ意志入力内容をlocalhost:3000/msgにPOSTリクエストとして送信するSee here for more details、ここでの問題は、ページがリフレッシュまたはリダイレクトされることです（実装に応じて、この場合はSPAが必要な場合はAJAXを使用する必要があります）。 AJAXを使用しても、HTTPリクエストを使用してチャットアプリケーションを実装するのは難しくなります。この機能を実現するには、WebSocketプロトコルを使用することをお勧めします。あなたに大いに役立つSocket.ioというモジュールがあります。それはリアルタイムアプリケーションに最適なイベントドリブンシステムを備えています。公式サイトをチェックできます。彼らは数百行のコードで書かれたチャットアプリケーションの例を持っています。今

のは、サーバー側のコードに移動させ、第一に...そこここで、特急のない方法がreadを呼ばないのですあなたのコードの作業バージョンです：

var express = require('express'); 
 
var http = require('http'); 
 
var app = express(); 
 

 
var msg = []; 
 

 
app.get('/', function(req, res){ 
 
    //You should use some template engines like EJS or Pug to render your HTML page with messages or the user will see nothing 
 
    res.sendFile(__dirname + '/index.html'); 
 
}); 
 

 
app.get('/msg', function(){ 
 
    msg.push(req.query.msgContent); 
 
    res.redirect("/"); 
 
}); 
 

 
app.listen(3000, function(){ 
 
    console.log("Server is running on port " + 3000); 
 
});

上記のコードがしますあなたがレンダリングしなかったクライアント側の部分には何も表示されません（またはmsg配列をクライアント側のスクリプトに送って埋め込みます）。私はちょうどあなたにあなたのアイデアの実装を与えていないことを明確にしようとしています

私はこれが少し助けてくれることを願っています。

出典

2017-09-02 16:36:09

これも正しくないです。あなたは ''に '

'を持っていません。それは ''でなければなりません！ – Stuart

Ops、私はそれに注意を払っていませんでした：p –

別のHTMLファイルから要素を取得する方法

答えて

関連する問題