• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:Text表示のHTMLファイルを出力できません)

テキスト表示のHTMLファイル出力できず Javascriptでブラウザに表示させ保存する方法を教えてください

このQ&Aのポイント
  • Javascriptを使用して、ブラウザに入力された文字をHTML上に表示する方法を学びましたが、HTMLファイルの保存がうまくいきません。
  • 提供されたコードを参考に、ブラウザに入力されたテキストをHTMLファイルとして保存するための関数を作成しましたが、正常に動作しません。
  • 質問者が作成した短い例題を実行してみましたが、保存されるファイルが見つからず、どこが間違っているのかを知りたいです。

質問者が選んだベストアンサー

  • ベストアンサー
  • heburusu
  • ベストアンサー率85% (140/164)
回答No.2

FireFoxで試してみましたが、たしかにダウンロードがはじまりませんでした。 調べてみましたが、 document.body.appendChild(a); をcreateElementの下に追加する必要があるようでした。

参考URL:
https://support.mozilla.org/ja/questions/968992
mqm
質問者

お礼

長い間、困っていた問題が見事に解決いたしました。 ご指導いただき感謝しております。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • heburusu
  • ベストアンサー率85% (140/164)
回答No.1

当方の環境で上記HTMLをコピーしてChromeで実行したところ、 正しくdownloadされました。 -- OS: Windows 7 64bit ブラウザ: Chrome 49 -- どのブラウザで試されていますか? どんなエラー(メッセージ)かわかりますか?

参考URL:
http://qiita.com/wadahiro/items/eb50ac6bbe2e18cf8813
mqm
質問者

補足

ご回答ありがとうございます。 同じOSで Firefox 最新版を使用しております。 何も応答が起きないことから、エラーメッセージをお伝えすることもできませんでした。 多くのユーザーに特定のファイルを提供する目的から、他のブラウザに変更することなく、何とかHTML出力を主なブラウザすべてで実行できる方法を求めています。 よろしくお願い申し上げます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • テキストエリア内で改行するには。

    次のスクリプトを実行すると、テキストエリア内に 01234560 と数字が表示されますが、これを 0 1 2 . というように改行も含めてテキストエリアに出力するにはどうすればよいでしょうか。 ¥nという文字を使用するのでしょうか? <html> <head> <script language="JavaScript"> <!-- var textA="" function my1() {for (i=0;i<11;i++){textA=textA+new String(i)} document.form1.text1.value=textA;} //--> </script> </head> <body> <form name="form1"> <textarea name="text1" size="10"></textarea> <input type="button" value="CLICK!" onClick="my1();"> </form> </body> </html>

  • 追加したテキストボックスとテキストエリアの数の制御

    下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか? あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか? <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>

  • 外部ファイルにするとテキストが書き込めない

    こんにちは、javascript初心者です。 HTMLのtextarea内のテキストを変えたいのですが、HTMLにJSを埋め込むと動作するのですが、外部JSファイル読み込みだとなぜか何も表示されません。 なぜでしょうか。原因のわかる方、説明をどうかよろしくお願い致します。 ●HTML <head> <script src="test.js" type="text/javascript"></script> </head> <body> <form name="form1"> <textarea name="message" id="msg" rows="5" cols ="50"></textarea> </form> </body> ●JS window.onload = message(); function message(){ alert("hello");              //←これはちゃんと動作します。 document.getElementById("msg").value="hello"; //← 動作せず。 document.form1.message.value="hello"; //← これも上と同じく片方ずつ試しましたが、ダメでした。 }

  • HTMLでテキスト入力し表示させる

    HTMLでテキストボックスに文字を入力し、表示させたいのですがうまくできません。 見た目はできているようなのですが、文字が表示されない状態です。 コードを記載しますので、お手数をお掛けしますがご教授頂けますでしょうか。 <html> <head> <script> function add(){ document.getElementById("target").innerText = document.getElementById("name").value; target = document.getElementById("output"); document.write(target); } </script> </head> <body> <p>名前を入力してください</p> <input id="name" name="name" type="text" size="30" onkeydown="update_field();"> <br> <input type="button" onclick="add()" value="実行"> <form action="index.html" method="post"> <br> <input type="submit" name="exit" value="戻る"> </form> </body> </html>

  • JSの保存ダイアログについて

    以下のコードは簡易メモ的なものです そこに書き込まれた内容を保存できるようにしたいのですがfunction dl()には何を書けばいいのでしょうか? 調べてみて function dl(C:\){ var a = document.createElement('a'); a.href = C:\; a.setAttribute('dl', name || 'noname'); a.dispatchEvent(new CustomEvent('click')); } としてみたのですがこれを書き込むと保存ダイアログはおろかtextの保存もできなくなってしまいます <input type="text" id="title"><br><br> <textarea id="memo" rows="8" cols="50"></textarea><br><br> <input type = "button" value="SAVE" onclick="dl();"> <script> var title = document.getElementById("title"); var memo = document.getElementById("memo"); window.onload = function() { var body_title = localStorage.getItem("title"); if (body_title != null) title.value = body_title; var body_memo = localStorage.getItem("memo"); if (body_memo != null) memo.value = body_memo; } title.onchange = function() { localStorage.setItem("title",title.value); } memo.onchange = function() { localStorage.setItem("memo",memo.value); } function dl(){ } </script>

  • 選択されたラジオボタンの値が取り出せない

    フォームを使って普通のHTMLで記述すれば選択された値が 送られてくると思うのですが、エレメントを作って次のような やり方だと、「2」を選択したとしてもvalueが「1」しか返ってきません。 どうすれば適切に値を取り出すことができるのでしょうか? var element1 = document.createElement("span"); element1.innerHTML = "<input type='radio' name='a' value=1>"; document.body.appendChild(element1); var element2 = document.createElement("span"); element2.innerHTML = "<input type='radio' name='a' value=2>"; document.body.appendChild(element2); ~何かクリックした先でidが「a」のオブジェクトを取得し、選択されてた値を取り出したい~ var ele = document.getElementById("a"); alert(ele.value);←1しか表示されない

  • urlデータのHTMLファイルへの出力

    Javascriptについて質問があります。  HTMLファイル1のフォーム「registerForm」に入力されたurlデータのテキストをHTMLファイル1のdivタグ「contents」に出力させたいのですが、以下のスクリプトでは動きませんでした。  どこがいけないのでしょうか? m = document.getElementsByName("registerForm").value; gettext = m.location.search; gettext = m.substring(1, gettext.length); n = decodeURI(gettext); mystr = string(n); for (i = 0; i = 2; i++) { var mainobj = document.getelementbyid("contents"); var k = mystr.indexof("&", j); var targetstr = mystr.substr(j, k); targetstr = document.createtextnode(targetstr); document.receive.id("contents").value = mainobj.appendchild(targetstr); j = k; }

  • textareaで入力した文字を改行したままで表示したいのですが。

    textareaに複数行で入力した文字を改行したままで表示したいのですが 改行されずに表示されます。 改行したままで表示するのはどうすればいいでしょうか? <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- function check(){ var strName; strName = document.nform.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="nform" > <textarea cols="30" rows="10" name="textN"></textarea> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" style="position:absolute;font-size:24px;"> </DIV> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • テーブルの行削除について

    以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>

  • HTMLの取得と解析について

    フォームのtextareaにHTMLを入力して、そこから必要なタグを取得したいのですが上手くいきません。 textareaの値は取得できています。 textareaの値からgetElementsByTagNameを使用してtableタグを取得しようとしているのでがエラーが出ます。 chromeによると Uncaught TypeError: Object ・・・・ has no method 'getElementsByTagName' 取得した値をgetElementsByTagNameにほり込むのが間違ってるような気もするのですが、良く分かりません。 テキストエリアに入力したHTMLをパースして、再利用する良い方法がありましたらご教授ください。 以下に現状のソースを書かせて頂きます --------------------------------------------------------------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> <!-- function test() { var org_src = document.form1.src.value; table = org_src.getElementsByTagName('table'); document.getElementById('test').innerHTML = org_src; } // --> </script> </head> <body> <p>自動出力</p> <form name="form1"> <p>テキストエリアにソースを張り付けて下さい</p> <p> <textarea id="src" rows="5" cols="30"> </textarea> </p> <p> <input type="button" value="実行" onClick="test()"> </p> </form> <div id="test"> </div> </body> </html> ---------------------------------------------------------------------