質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • JavaScript

    15867questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    3869questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1983questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JSでの関数の使い方。

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 577

YuichiKataoka

score 206

例えば以下の様な関数を作って

function hoge() {
}

これをHTMLファイル内のi<div d="koko"></div>というところへ書き出したいとき。
<div id="koko"></div>この中へ出力したい


初歩的で申し訳ないのですが、どのような記述をしたら<div>タグの中に書けるでしょうか?

ご教授下さいませ。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+1

キーワードとしては、javasctip DOM 操作
http://www.casleyconsulting.co.jp/blog-engineer/javascript/%E3%80%90javascript%E3%80%91%E4%BB%8A%E6%9B%B4%E8%81%B4%E3%81%91%E3%81%AA%E3%81%84%EF%BC%81%EF%BC%9Fdom%E6%93%8D%E4%BD%9C%EF%BC%881%EF%BC%89/

replace関数
のあたりにそのものずばりな内容があります。


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/22 16:03 編集

    回答ありがとうございます。
    replace関数で文字は「.innerText = '○○○'」;で入れることが出来るようですが
    文字では無く、関数を入れたい場合はどうすれば良いのでしょうか?

    作った関数「function hoge() 」をこのdiv内で出力したいです。

    キャンセル

  • 2015/08/22 17:07

    戻り値ではなくfunction hoge() の中で文字をHTMLとして表示しているという事でしょうか?
    実際の
    function hoge()
    を書いてみてもらえると回答出来ると思います。

    キャンセル

  • 2015/08/22 17:26

    コチラです。


    function hoge() {
    document.write("<table border='1' class='loadCalendarTable'>");
    document.write("<tr><td colspan='7' bgcolor='#2a2e3e'>");
    document.write("<span class='loadCalendarTitle'>", (myMonth+1),"月"+"営業日カレンダー</span>");
    document.write("</td></tr>");
    document.write("<tr>");
    for(i=0; i<7; i++){
    document.write("<td align='center' ");
    if(i==0)document.write("bgcolor='#fa8072'>");
    else document.write("bgcolor='#f3f3f3'>");
    document.write("<strong>",myWeekTbl[i],"</strong>");
    document.write("</td>");
    }
    document.write("</tr>");
    for(i=0; i<myTblLine; i++){
    document.write("<tr>");
    for(j=0; j<7; j++){
    document.write("<td align='center' ");
    myDat = myTable[j+(i*7)];
    if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'");
    else if(j==0) document.write("bgcolor='#FF33CC'>");
    else document.write("bgcolor='#fff'>");
    document.write("<strong>",myDat,"</strong>");
    document.write("</td>");
    }
    document.write("</tr>");
    }
    document.write("</table>");
    }

    これでカレンダーを表示するのですが、これをHTMLファイルの中の
    <div id="koko"></div>の中に表示したいです。
    よろしくお願い致します。

    キャンセル

+1

すみません、質問を誤解していました。
関数の結果をdivの中に書き出したいのではなくて

function hoge(){
}
という文字列をHTMLとして書き出したいという事でしょうか。
普通に
<div id="koko">
function hoge() {
}
</div>
とすると改行等が反映されなくて、HTMLが崩れる場合もあるのでそのまま表示したい

ということであれば
<div id="koko">
<pre>
function hoge() {
}
</pre>
</div>
という感じで<pre>タグを使って記述します。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/22 16:35

    私の質問の仕方が悪かったみたいです。
    もう少し具体的に質問します。

    function hoge() {
    }
    ↑この関数はカレンダーを出力するものを入れてあります。
    これを特定の<div id="koko"></div>に出力したいです。

    キャンセル

checkベストアンサー

0

質問の意図が理解出来ました。
題名の通りなのを誤解していました。

javascriptのHTML中での呼び出し方は以下の様な形になります。
*カレンダーはうまく表示されなかったので、問題を簡単にするためにtestと表示するだけの関数に変更してあります。
*HTMLに誤りがある場合など、表示が上手くいかないと確認が出来ないので
http://www.ipentec.com/document/document.aspx?page=javascript-view-source-output-by-javascript
にあるような方法で確認しながら開発するとスムーズにいきます。

<html>
<head>
<script type="text/javascript">
function hoge() {
document.write("test");
}
</script>

</head>
<body>
<div id="koko">
<script type="text/javascript">
    hoge();
</script>
</div>
</body>
</html>

参考になりそうなURL
http://www.openspc2.org/JavaScript/study/script.html
キーワード html javascript 関数 呼び出し

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/22 19:31

    回答ありがとうございます。
    なぜかカレンダーがうまく狙ったdivタグに入りません。
    scriptは以下の物なのですが

    /*======================
    日付の取得
    ======================*/
    var Years = new Date();
    var Toshi = Years.getFullYear();
    var Tsuki = Years.getMonth() + 1;
    var dayLoad = Years.getDate();

    document.getElementById("dayLoad").innerHTML = Toshi+"年"+Tsuki+"月"+dayLoad+"日更新";
    /*======================
    Calendar
    ======================*/
    myWeekTbl = new Array("日","月","火","水","木","金","土");
    myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);

    if (((Toshi%4)==0 && (Toshi%100)!=0) || (Toshi%400)==0){
    myMonthTbl[1] = 29;
    }
    myMonth = Years.getMonth();
    dayLoad = Years.getDate();
    Years.setDate(1);
    myWeek = Years.getDay();
    myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);
    myTable = new Array(7*myTblLine);
    for(i=0; i<7*myTblLine; i++) myTable[i]=" ";
    for(i=0; i<myMonthTbl[myMonth]; i++)myTable[i+myWeek]=i+1;

    function loadCalendar() {
    document.write("<div class='loadCalendarWrapper'><table border='1' class='loadCalendarTable'>");
    document.write("<tr><td colspan='7' bgcolor='#2a2e3e'>");
    document.write("<span class='loadCalendarTitle'>", (myMonth+1),"月"+"営業日カレンダー</span>");
    document.write("</td></tr>");
    document.write("<tr>");
    for(i=0; i<7; i++){
    document.write("<td align='center' ");
    if(i==0)document.write("bgcolor='#fa8072'>");
    else document.write("bgcolor='#f3f3f3'>");
    document.write("<strong>",myWeekTbl[i],"</strong>");
    document.write("</td>");
    }
    document.write("</tr>");
    for(i=0; i<myTblLine; i++){
    document.write("<tr>");
    for(j=0; j<7; j++){
    document.write("<td align='center' ");
    myDat = myTable[j+(i*7)];
    if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'");
    else if(j==0) document.write("bgcolor='#FF33CC'>");
    else document.write("bgcolor='#fff'>");
    document.write("<strong>",myDat,"</strong>");
    document.write("</td>");
    }
    document.write("</tr>");
    }
    document.write("</table><div class='hosoku'><span class='HolidayMark'>■</span>は休業日です</div></div>");
    }
    function hoge() {
    document.write("test");
    }

    関数を変数に入れて、ページを読み込んでから表示したいです。
    よろしくお願い致します。

    キャンセル

  • 2015/08/23 23:49

    教えて頂いた方法で出来ました。最初から付き合っていただき、感謝しております。
    ありがとうございました。

    キャンセル

0

function _a(){
  console.log(1);
}
_a.toString();

コンソールでご確認ください。

以下は一例ですが
function hoge(){
  console.log(1);
}
document.getElementById("koko").innerHTML=hoge.toString();

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/23 23:53

    すみません。これは何が出来るようになるのでしょうか?
    勉強不足で使い方が分かりませんでした。

    キャンセル

  • 2015/08/24 01:08

    tanat様と同様の解釈をしておりました。
    質問を関数のソースコード自体を表示したいという意味と解釈いたしました。

    質問する際に情報をできる限りまとめ、必要な情報を多く掲載することで目的の回答が比較的早く得られるものと考えます。

    キャンセル

0

えー。document.writeは過去の遺産です。こう言っちゃあれですがちゃんと勉強してからその言語を使うべきです。
まず、HTMLやXMLの文章構造はDOM、ドキュメントオブジェクトツリーという概念をもって抽象化されます。難しい話ですが、要するにすべての「タグ」「テキスト」は「ノード」という概念に置き換えられます。んで、EcmaScriptではこの「ノード」について操作を行います。それをノードのツリーとして解釈してるんだから当たり前です。

んで、具体的にはこうします。
document.getElementbyId("ID").appendChild(document.createTextNode("TEXT"));
まずdocument.getElementByIDで求める「ノードオブジェクト」を得ます。んで、ここで得られるのは「タグ(div)」を表現するオブジェクトですが、このようにタグを表現する「ノードオブジェクト」を「エレメントオブジェクト」と言います。んで「ブロックタグー子タグを持ちうるタグ」を表現するすべてのエレメントノードはappendChildメソッドを持ちます。んでこのメソッドはその「ノード」の下に「子ノード」を追加します。
んでdocument.createTextNodeは新たに「テキストノードオブジェクト」をメモリ上に生成するコンストラクタ関数です。「テキストノード」とは、マークアップ言語中の「マークアップされたー文章本体」を表現するノード・オブジェクトで、すべてのあなたが読んでいるHTLM文章中の、あなたに読まれるべき文章本体はすべてブラウザ上の抽象化されたメモリ構造上では「テキストノード」として扱われているはずです。んで、「テキストノード」とはやはり「ノード」オブジェクトですので、任意の「ノードオブジェクト」の「子ノード」になり得ます。と、いうことでこの生成された「テキストノード」がappendchildによって検索されたDIVの子ノードとなり、結果そのようにテキストが表示されることになります。

初学者用にさらっと書きましたから細かいレベルにおいてはいささか曖昧さが残ってますが、まあ問題になりません。もしこの文章があなたに難しく感じられたとすればそれはあなたがJSをまともに使うに足るだけの知識を有していないという事ですから分厚い書籍を以って勉強し直すべきでしょう。私はおいラリーの本で勉強しましたよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/23 23:51

    回答ありがとうございます。
    >document.getElementbyId("ID").appendChild(document.createTextNode("TEXT"));
    ↑これは関数を出力できるのでしょうか?

    >私はおいラリーの本で勉強しましたよ。
    まだまだ勉強不足を自覚しておりますので、今度学んでみます。

    キャンセル

  • 2015/08/24 04:46

    おそらくこういうことがしたいのですよね
    Output_Function("出力文字列"); //=>DIVのなかに"出力文字列"が出てくる。

    だとすればこうすれば良いです。ちょっとわかり易く書きます。
    function Output_Function(outPut_str){
    //まず目的のDIV要素(を表現する「ノードオブジェクト」というオブジェクト)をgetElementByIDで抽出してそれを変数にでも保存しておきます。
    targetDiv=document.getElementById("DIV_ID");
    //つづきまして「テキスト」を表現する(「テキストノードオブジェクト」という)オブジェクトをcreateTextNodeで生成してこれも保存しときましょう。
    textNode=document.createTextNode(outPut_str);
    //最後に抽出したDivにappendChild(日本語にすれば子供を追加)で作ったばっかりの「テキストノード」を子供として追加するんです。
    targetDiv.appendChild(textNode);
    }

    これをまあちょっぴしいじわるして(まあこういう書き方は慣れてくれば誰でもしますが)「1行で」書いたのが本文に示したコードです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15867questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    3869questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1983questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。