JavaScriptでちゃんと表示されない理由とは？

2023/09/06 02:21

このQ&Aのポイント

JavaScriptの参考書通りに書いても表示されない理由について詳しく解説します。
新製品と価額のみ表示されてしまう問題の原因と対策を説明します。
リラックスチェアや価額4000などが表示されない場合の原因と解決方法を解説します。

ベストアンサー

javascriptでちゃんと表示されない。

2014/08/15 22:49

javascriptの参考書通りに書いてるのになぜか出ません。なぜか、新製品と価額だけしかでません。リラックスチェアとか価額４０００とかが出ません。何が原因かわかりません。何が原因なんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>はじめてのHTML</title> <style> table{border:solid 1px orange; border-spacing:0pc;} th,td{border:solid 1px orange; padding:4px;} </style> <script type="text/javascript"> var prod_name={'リラックスチェア','リラックスデスク','ブックスタンド'}; var prod_price ={4000,12000,800}; </script> </head> <body> <h1>新商品価額表</h1> <table> <thead> <tr><th>製品名</th><th>価額</th></tr> </thead> <tbody> <script type="text/javascript"> document.write('<tr>'); document.write('<td>'+ prod_name[0]+'</td>'); document.write('<td>'+ prod_price[0]+'</td>'); document.write('</tr>'); </script> </tbody> </table> </body> </html>

nomnom20
お礼率17% (7/39)

JavaScript
回答数1
ありがとう数11

みんなの回答 （1）
専門家の回答

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

ベストアンサー

across972
ベストアンサー率42% (12/28)

2014/08/15 23:00 回答No.1

修正したところだけ、書きますね。 <script type="text/javascript"> var prod_name=["リラックスチェア","リラックスデスク","ブックスタンド"]; var prod_price =[4000,12000,800]; </script> ↑まず、この部分は、中かっこ「{」ではなく、大かっこ「[」で囲います。　また、文字列はダブルクォーテーション「"」で囲います。 <script type="text/javascript"> document.open(); document.write("<tr>"); document.write("<td>"+ prod_name[0]+"</td>"); document.write("<td>"+ prod_price[0]+"</td>"); document.write("</tr>"); document.close(); </script> ↑次にこの部分、documentを使う場合、open()、close()を書きましょう。　あとは、ダブルクォーテーションにするだけです。　ループして、配列の他を表示する等、いろいろ練習してください（＾＾）

質問者

お礼 2014/08/16 02:24

{}と[]を間違えてました修正したらできました。ありがとうございました。

関連するQ&A

jqueryのsortableで行き来自由に
お世話になります jqueryのsortableでconnectWithを使うことで別のエリアにソートが可能になりますがすべての要素を別の要素に移動した場合もとの場所に戻すことが不可能になってしまいますこれを可能にするにはどうしたらいいのでしょうか例として以下のソース AエリアからBエリアに「a」「b」を移動させた後に BエリアからAエリアに戻そうとしても、移動できなくなってしまいます <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>connectWith</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sortable table tbody").sortable({ connectWith:'#sortable table tbody' }).disableSelection(); }); </script> </head> <body> <div id="sortable">  <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアA（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>a</td> </tr> <tr> <td>b</td> </tr> </tbody> </table>   <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアB（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>c</td> </tr> <tr> <td>d</td> </tr> </tbody> </table>  </div> </body> </html> 対策方法御存知の方お助け下さいませ！
- ベストアンサー
- JavaScript
JavaScriptの画面表示について
●質問の主旨次の文章の内容をGoogleChrome上で表記したいのですが、 5行目の「30個ご購入なら、通常72000円のところが、今なら48900円！」が表記されません。以下に示すコードのうちどこに問題があるでしょうか？ご存知のかたご教示よろしくお願いします。 ●本来表記したい文章新製品テンデイパックS のご紹介話題のテンデイパックS を通常価格 2400 円のところを特別価格 1680 円でご提供！まとめ買いならさらにお得！　10個につき500円お引きします。 30個ご購入なら、通常72000円のところが、今なら48900円！ ●JavaScriptのコード <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>10日で覚えるJavaScript</title> <script type="text/javascript"> //変数の定義 var prod_name = 'テンデイパックS'; var prod_price = 2400; </script> </head> <body> <h1>新製品 <script type="text/javascript">document.write(prod_name);</script> のご紹介</h1> <p>話題の <script type="text/javascript">document.write(prod_name);</script> を通常価格 <script type="text/javascript">document.write(prod_price);</script> 円のところを</p> <p>特別価格 <script type="text/javascript">document.write(prod_price*0.7);</script> 円でご提供！</p> <p>まとめ買いならさらにお得！10個につき500円をお値引きいたします。</p> <script type="text/javascript"> var kosuu = 30; var special_price = prod_price * 0.7 * kosuu - kosuu / 10 * 500; document.write('<p>' + kosuu + '個ご購入なら、通常' + (prod_price * kosuu) + '円のところが、今なら' + special_price + '円!'</p>; </script> </body> </html>
- ベストアンサー
- JavaScript
javascriptに関する質問です
９×９のます目一つ一つに・を表示させるプログラムをつくっているのですがなかなかうまくいきませんどなたかご教授ください <script language="JavaScript" type="text/javascript">  </script>
- ベストアンサー
- JavaScript
2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
firefoxのHTMLの<table>の設定の仕方
下記のテーブル指定で「月」と「日」のテーブルの右側のボーダーをcssで border-right: none にしてもfirefoxでは黒色になってしまうので、どなたかわかる人おしえてください <style type="text/css">  </style> </head> <body> <form method="POST" action=".jsp"> <table border="1"> <thead> <tr> <th class="left right" colspan="4">予約内容</th> </tr> </thead> <tbody> <tr> <th rowspan="2" class="right left">希望日時</th> <td> <input type="text" name="month" size="3" maxlength="3" />月 </td> <td class="right2"> <input type="text" name="day" size="3" maxlength="3" />日 </td> <td class="right1"></td>>
- ベストアンサー
- HTML
javascript のsyntaxについて
HTML文書でJavaScriptを使い、任意の数の<input type="text" .. > タグを表示させようとしています。添付の写真の上の方にある"number of parts" の部分が、その任意の数を入れる所で、隣のボタンを押すと関数 "inputBox()" を呼ぶようにしてあります。入力した任意の数だけwindow.document.write() で書かれた入力ボックスが出てくると思ったのですが、出てきません。 maxQty=window.document.getElementById("qty").value; によって取得した任意の数をforループで使っていますが、これが働いていないようです。　というのは、この文をコメントアウトして具体的な数を入れるとちゃんとその数だけの入力用の行が出てくるからです。どう考えてもこの文に間違いはないように思われますが、どこがおかしいのか、どなたか教えてくださいませんでしょうか。以下にソースコードをコピーします。 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> makeBOMtables.html</title> <script type="text/javascript"> </script> </head> <body bgcolor="navy" style="font-size:16pt; color:yellow"> <center> <h3>company name</h3> <h2>Product BOM List making Program</h2> <form method="POST" action="makeBOMtables.php"> <table border="1"> <tr><td>product number</td> <td> description </td><td>number of parts</td><td></td></tr> <tr> <td><input type="text" size="16" style="font-size:16pt" id="prodNum" name="prodNumx"/></td> <td><input type="text" size="50" style="font-size:16pt" id="prodName" name="prodNamex" /></td> <td><input type="text" size="5" style="font-size:16pt" id="qty" name="qtyx"/></td> <td><input type="button" value="make BOM" onclick="inputBox()"></td> </tr> </table> </br> <script > var maxQty; function inputBox(){ window.document.write("<html><head></head><body bgcolor='navy' style='font-size:16pt; color:yellow'><center>"); window.document.write("<table border='1'>"); window.document.write("<tr> <th>item #</th><th>part number</th> <th>description </th><th>we need</th>"); window.document.write(" <th>we have</th> <th></br></th></tr>"); // table header maxQty=window.document.getElementById("qty").value; for (var count=1; count<=maxQty; count++){ window.document.write("<tr>"); window.document.write("<td><input type='text' size='5' style='font-size:12pt' id='item"+ count + "' name='itemx"+ count +"' value="+ count +" /></td>" ); window.document.write("<td><input type='text' size='16' style='font-size:12pt' id='partNum"+ count + "' name='partNumx"+ count +"' /></td>" ); window.document.write("<td><input type='text' size='50' style='font-size:12pt' id='partName"+ count + "' name='partNamex"+ count +"' /></td>" ); window.document.write("<td><input type='text' size='5' style='font-size:12pt' id='qtyN"+ count +"' name='qtyNx"+ count + "' /></td>" ); window.document.write("<td><input type='text' size='5' style='font-size:12pt' id='qtyH"+ count +"' name='qtyHx"+ count + "' /></td>" ); window.document.write("<td><input type='submit' value='end input'/> </td>"); window.document.write("</tr>"); }// end for window.document.write("</center></body></html>"); } </script> </form> </center> </body> </html> また、入力行が表示されるのは、なぜか別のページですが、これは今は気にしません。詳しい方がいらっしゃいましたら、よろしくお願いいたします。
- ベストアンサー
- JavaScript
マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。テーブルを作成してマウスオーバーしている行のバックカラーを変えるプログラムを作成しています。ですが、rowspanを使用すると、rowspanが別の行扱いになり、バックカラーが変えられなくなってしまいました。一緒にしたい場合どうしたら良いでしょうか。もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ベストアンサー
- JavaScript
マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて以下のようにCSSとHTMLを書いてみました。しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
JavaScriptの質問です。
JavaScriptの質問です。下記フォームで、１番が入力されると、２、３番目のエリアがグレーになって入力不可になる方法を教えてください。 <tr> <th align="right">1番</th> <td><input type="text" size="10" name="shopid" id="shopid" /></td> </tr> <tr> <th align="right">2番</th> <td><input type="text" size="10" name="area" /></td> </tr> <tr> <th align="right">3番</th> <td><input type="text" size="10" name="business" /></td> </tr> <tr> よろしくお願いします。
- ベストアンサー
- JavaScript
JavaScriptの件で、質問させてください。
JavaScriptの件で、質問させてください。どうしても解決できない問題がありますので、よろしくお願いします。やりたいこと：csvファイル(日本語カラム名)の内容をブラウザに表示させたい。状況：JavaScript 、html初心者です。　　　JavaScript内でdocument.writeを使用してhtml文を書いています。　　　csvファイルのカラム名が日本語の場合、ブラウザへの表示に失敗※します。　　　※カラム名だけ表示されて実際データが表示されない。　　　下記の例の場合、csvファイル内のカラム名を"日時"、"B"、"C"にしました。　　　実行するとデータは"B"、"C"の部分だけ表示されて、"日時"の部分は空白になります。　　　尚、csvファイルの"日時"を"A"にして、ソースも"A"を読むように変更すると　　　データは正常にブラウザに表示されます。　　　※JavaScriptをやめて、htmlだけで記述すると日本語カラム名でも　　　　正常に表示されます。教えていただきたいこと：　　　・ソース抜粋部分に記述ミスはありますでしょうか？　　　・JavaScript？document.write？の記述制限でしょうか？　　　・カラム名をアルファベットにすると正常に表示されるので、　　　　不具合の原因はソース抜粋部分にあると思うのですが、　　　　その他の部分でエラー原因となりうる場所はありますでしょうか？ソース一部抜粋 document.open(); document.write("<object id='ID1' classid='clsid:333C7BC4-460F-11D0-BC04-0080C7055A83'>"); document.write("<param name='DataURL' value='test.csv'>"); document.write("<param name='UseHeader' value='true'>"); document.write("</object>"); document.write("<table datasrc='#ID1' border=1>"); document.write("<thead><tr>"); document.write("<th>日時</th>"); document.write("<th>場所</th>"); document.write("<th>参加人数</th>"); document.write("</tr></thead>"); document.write("<tr>"); // document.write("<td><span datafld='A'></span></td>"); document.write('<td><span datafld='日時'></span></td>'); document.write('<td><span datafld='B'></span></td>'); document.write("<td><span datafld='C'></span></td>"); document.write("</tr>"); document.close(); 質問すること自体も初めてなので、至らない点も多々あると思いますがよろしくお願いします。
- ベストアンサー
- JavaScript