- 締切済み
javascript htmlの追記について
いつもご教授いただきありがとうございます。 当方は全くの初心者ですので皆様にとっては質問するにあたいしないことかと存じますがよろしくお願い致します。 「javascriptを使用して選択した図形をSVGで描く」といったスクリプトをかきたいのですが、もちろん動きません。 自分でも「おかしい」というのはわかるのですが、かといってこんな数行のものを どう触ればいいのかと途方にくれております。 おそらくSVGへのｈｔｍｌを追記するところが問題だろうと思っております。 (…が、selectの値すらとれていない可能性もあります) よろしくお願い致します。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <!DOCTYPE html> <lamg="ja"> <charset="utf-8"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <script type="text/javascript"> function a(){ if(document.getElementById("sentaku")){ id=document.getElementById("sentaku").value; if(id=="circle"){ $("#svg").html('<circle cx="60px" cy="60px" r="50px" fill="red" stroke="blue" stroke-width="2px" />') } else if(id =="rect"){ $("#svg").html('<rect x="100px" y="100px" width="50px" height="50px" fill="blue" stroke="red" stroke-width="2px" />') } } } </script> <body> <form method="post" action=""> <select id="sentaku" name="zukei"> <option value="circle">円 </option> <option value="rect">四角 </option> </select> <input type="submit" value="表示" onclick="a()" > </form> <h3>この下に表示</h3> <svg width="250px" height="250px" xmlns="http://www.w3.org/2000/svg" id="svg"></svg> </body> </html>
- sheyma
- お礼率91% (21/23)
- JavaScript
- 回答数1
- ありがとう数14
- みんなの回答 （1）
- 専門家の回答
みんなの回答
select の値を取得するところはあっていますが、それ以外が いろいろ間違っています。とりあえず、円を描くほうだけ修正 方法を紹介します。 1. <svn> 要素にIDを付ける必要があります。 × <svg width="250px" height="250px" (以下省略) ○ <svg id="svg" width="250px" height="250px" (以下省略) 2. 円を描く方法に jQuery を使っていますが、svn は jQuery で 操作できません。円の描き方はこうです。 var figure = document.createElementNS("http://www.w3.org/2000/svg", "circle"); figure.setAttribute('cx', '60px'); figure.setAttribute('cy', '60px'); figure.setAttribute('r', '50px'); figure.setAttribute('fill', 'red'); figure.setAttribute('stroke', 'blue'); figure.setAttribute('stroke-width', '2px'); document.getElementById("svg").appendChild(figure); 3. ボタンは submit で作ると描画後に消されてしまいます。 × <input type="submit" value="表示" (以下省略) ○ <input type="button" value="表示" (以下省略)
関連するQ&A
- javaScriptのif文について…
以下のようなプログラムを作成しました。作ったのはサンプルで、本当に作りたいのはもっと条件が多いのを作りたいのですが、かなりifの羅列となってしまいます。他に何か良い方法はありませんか？教えてくださいm(__)M <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1) { rslt=36; } else { if (v1==1 && v2==2) { rslt=29; } else { if (v1==1 && v2==3) { rslt=22; } else { if (v1==1 && v2==4) { rslt=14; } else { if (v1==1 && v2==5) { rslt=7; } else { if (v1==1 && v2==6) { rslt=0; } else { rslt='?'; }} document.getElementById('txt').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 </select> <select id="s2" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 </select><p> <input type="text" id="txt" value=""> </body> </html>
- ベストアンサー
- JavaScript
- 外部SVGファイルを指定時のJavaScript
外部SVGファイルを指定している場合のJavaScriptの書き方 はじめまして。SVGを勉強中のとりがらと申します。 以下のような構成でHTML・SVGを作成しています。 （添付した図の通りです） 【XXX.html】 ・embedタグでroot.svgを埋め込み。 【root.svg】 ・ellipseオブジェクト ・useタグのchild.svgオブジェクト1 ・useタグのchild.svgオブジェクト2 【child.svg】 ・circleオブジェクト ・rectオブジェクト このような場合、XXX.htmlに記述したJavaScriptにて、 『root.svg』内『useタグのchildオブジェクト1』の『rectオブジェクト』の色 を変えたいと考えております。 そこで、XXX.htmlに下記のようなJavaScriptを書いたのですが、 child.svg内の四角の要素を取得する時点で、エラーが発生してしまいました。 > svgSub2.getElementById is not a function このような場合、どのようにJavaScriptを書けばよいのでしょうか？ SVGの記述の方がおかしいのでしょうか？ どなたか解決策のご教示の程、よろしくお願いいたします。 +============================== + 環境 +------------------------------ ・WindowsXP ・Firefox 19.0 +============================== + 呼び出しhtml +------------------------------ <!DOCTYPE HTML> <html> <head> <script language="javascript" type="text/javascript"> function OnButtonClick(){ <!-- Root.svg内の楕円の色変更(OK) --> var svgdocMain = document.getElementById("idRoot").getSVGDocument(); var svgMainDaen = svgdocMain.getElementById("idRootObj0"); svgMainDaen.setAttribute("fill", "#00FFFF"); <!-- Child.svgオブジェクト1を非表示(OK) --> var svgSub1 = svgdocMain.getElementById("idRootObj1"); svgSub1.setAttribute("display", "none"); <!-- Child.svgオブジェクト2内の四角の色変更(NG) --> var svgSub2 = svgdocMain.getElementById("idRootObj2"); var svgSubRect = svgSub2.getElementById("idChildObj1"); <!--←エラー発生--> svgSubRect.setAttribute("fill", "#FFFFCC"); } </script> </head> <body> <form><input type="button" value="テスト" onclick="OnButtonClick();"/></form> <embed id="idRoot" type="image/svg+xml" src="root.svg" /> </body> </html> +============================== + root.svg +------------------------------ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve" id="svg_root" > <!-- 1.ROOT楕円 --> <ellipse fill="#00FF00" cx="20" cy="40" rx="15" ry="25" id="idRootObj0"> </ellipse> <!-- 2.Child.svg1 --> <use xlink:href="child.svg#svg_child_g" x="0" y="100" id="idRootObj1" /> <!-- 3.Child.svg2 --> <use xlink:href="child.svg#svg_child_g" x="0" y="200" id="idRootObj2" /> </svg> +============================== + child.svg +------------------------------ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" id="svg_child"> <g id="svg_child_g"> <!-- 1.CHILD四角 --> <rect fill="#FF00FF" x="50" y="50" width="40" height="40" id="idChildObj1"> </rect> <!-- 2.CHILD円 --> <circle fill="#00FF00" cx="50" cy="100" r="26.5" id="idChildObj2"> </circle> </g> </svg>
- ベストアンサー
- HTML
- Javascriptで質問です２
セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを２段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
- JavaScriptでの表の行の表示・非表示の切り替え
現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。 テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "test1"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "test1"){ if(document.getElementById){ document.getElementById("test1").style.display = "none"; } } } // --> </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト１</option> <option value="test2">テスト２</option> <option value="test3">テスト３</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p> </p> </td> <td width="217"> <p> </p> </td> </tr> </table> <div id="test1" style="display:none;"> （本来はここに2行追加したい） </div> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptの計算のNaNの判定について…
いろいろなアドバイスを参考に以下のようなプログラムを作り、値が正の時はちゃんと計算されるのですが負の時はNaNと判定されてしまいます。どうしたら負の場合でもちゃんと計算されますか？いろいろ調べたのですが見つかりませんでした…。よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=-100; } else { if (a==1 && b==2) { rslt1=-90; } else { if (a==2 && b==1) { rslt1=-80; } else { rslt1=-70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=-95; } else { if (a==1 && c==2) { rslt2=-85; } else { if (a==2 && c==1) { rslt2=-75; } else { rslt2=-65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=-60; } else { if (a==1 && d==2) { rslt3=-50; } else { if (a==2 && d==1) { rslt3=-40; } else { rslt3=-30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } function sum3() { document.getElementById('txt6').value=((document.getElementById('txt4').value + rslt2 + document.getElementById('txt5').value * 2) / 4); } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> <input type="text" id="txt6" value=""><p> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでコメントアウトができません
下記の様に 「/* ・・・・・ */」でコメントアウトしていますが、「/*」 「*/」も文字としてそのまま画面に表示され、非表示にしたいSELECTの枠も表示されてしまいます。 ご助言いただきたく宜しくお願い致します。 <body style="margin:0px; padding:0px;" onload="load()"> /* <body style="margin:0px; padding:0px;" onload="load()"> <FORM NAME=formMain > <SELECT id="categorySelect" NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(カテゴリーを選択してください) <OPTION VALUE="0">食事 <OPTION VALUE="1">病院 <OPTION VALUE="2">小売店 <OPTION VALUE="3">洋服 </SELECT> <SELECT id="subcategorySelect" NAME="city"> <OPTION VALUE="" SELECTED>(サブカテゴリーを選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> </FORM> */ <div> <input type="text" id="addressInput" size="40"/> <select id="radiusSelect"> <option value="0.5" selected>0.5km</option> <option value="1">1km</option> <option value="20">20km</option> </select> <input type="button" onclick="searchLocations()" value="検索へGO!"/> </div> <div><select id="locationSelect" style="width:25%;visibility:hidden"></select></div> <div id="map" style="width: 100%; height: 80%"></div> </body> </html>
- ベストアンサー
- JavaScript
- 同じようなのばかりだ申し訳ないのですが…javaに関してです。
以下のようなプログラムを作成しました。３つのスクリプトを動作させたいのですがどうすればよいですか？また，画像のように(1)～(3)の和を算出するにはどうすればいいですか？助けて下さい。お願いします。 <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1){ rslt=50; } else { if (v1==1 && v2==2) { rslt=47; } else { if (v1==2 && v2==1) { rslt=30; } else { rslt=20; }}} document.getElementById('txt1').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v3=document.getElementById('s3').value; var rslt; if (v1==1 && v3==1){ rslt=40; } else { if (v1==1 && v3==2) { rslt=80; } else { if (v1==2 && v3==1) { rslt=70; } else { rslt=10; }}} document.getElementById('txt2').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v4=document.getElementById('s4').value; var rslt; if (v1==1 && v4==1){ rslt=83; } else { if (v1==1 && v4==2) { rslt=53; } else { if (v1==2 && v4==1) { rslt=33; } else { rslt=13; }}} document.getElementById('txt3').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s2" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s3" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s4" onChange="hoge()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""> </body> </html>
- ベストアンサー
- Java
- javascriptがIEで機能しない
ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択１"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままです どこを修正してやればいいでしょうか？ ぜひ御指南ください。
- ベストアンサー
- JavaScript
- DOCTYPE宣言とjavascript
United Statesを選んだ場合、州を選択。 それ以外の国の場合はtextフィールドで県なりを直接書き込む と言うようにしたく、下記の様にページを作成したのですが、 IE、Opera、Safariなど他では全て動作したのですが、 Firefoxのみ動作しませんでした。 但し、DOCTYPE宣言の"http://www.w3.org/TR/html4/loose.dtd" を削除したらFirefoxでも動作しました。 ただ、ここを削除すると全体的にデザインがズレてしまいます。 Firefoxでも動くようにjavascriptの部分を変更すると言う事で解決したいのですが、 良い書き方が解りません。どなたかご教授願えますでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <script type="text/javascript"> function changeField(){ index= test_form.country.value; if (index != "UnitedStates"){ document.getElementById("select1").style.display="inline"; document.getElementById("select1").disabled=false; document.getElementById("select2").style.display="none"; document.getElementById("select2").disabled=true; } else { document.getElementById("select1").style.display="none"; document.getElementById("select1").disabled=true; document.getElementById("select2").style.display="inline"; document.getElementById("select2").disabled=false; } } </script> <form name="test_form"> <select name="country" onChange="changeField()"> <option value="Japan" selected="selected">Japan</option> <option value="UnitedStates">United States</option> </select> <input id="select1" name="state" type="text" size="20" /> <select id="select2" name="state" style="display:none" disabled> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> </select> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptの入力制御がうまく働きません。
JavaScriptでフォームの入力制御を行い、POSTされた値をPHPで精査して表示するコードを書いたのですが、下の例の「フード」で「その他」以外を選択するとまったく何も表示されません。ちなみにPHPのdisplay_errorsを.htaccessでOnにしてもエラーは表示されず、またJavaScriptをOFFにすると正常に表示されることから、PHPのコードではなく、JavaScriptのtxt.value=""; の部分に問題があると思われます。ですが、いろいろ調べましたが手詰まりになりました。 PHPとJavaScriptの双方にお詳しい方、どうかご教授くださいますようお願いいたします。 以下、問題のコードです。長くて申し訳ありませんm(_ _)m <script type="text/javascript"> function zzz(list,txt){ if (list.value == "その他"){ txt.disabled=false; }else{ txt.value=""; txt.disabled=true; } } </script> <?php if(!isset($_POST['pet'])){ ?> <body onload="zzz(document.getElementById('pet'),document.getElementById('petOther')),zzz(document.getElementById('food'),document.getElementById('foodOther'))"> <form method="post" action="test.php"> ペット： <select name="pet" id="pet" onchange="zzz(this,document.getElementById('petOther'))"> <option value="" selected="selected">↓</option> <option value="犬">犬</option> <option value="猫">猫</option> <option value="その他">その他</option> </select> （⇒<input type="text" name="petOther" value="" size="20" id="petOther" />） <br /> フード： <select name="food" id="food" onchange="zzz(this,document.getElementById('foodOther'))"> <option value="" selected="selected">↓</option> <option value="缶詰">缶詰</option> <option value="ドライフード">ドライフード</option> <option value="その他">その他</option> </select> （⇒<input type="text" name="foodOther" value="" size="20" id="foodOther" />） <button class="submit" type="submit"><span class="submitBTN">送信内容確認画面へ進む</span></button> </form> <?php }else{ print "<body>\n"; foreach($_POST as $key => $val){ if($key == "pet"){ if($val != "その他"){ $pet = $val; } } if($key == "petOther"){ if(!empty($val)){ $pet = $val; } } if($key == "food"){ if($val != "その他"){ $food = $val; } } if($key == "foodOther"){ if(!empty($val)){ $food = $val; } print $pet."に".$food."を与える"; } } } ?> </body> </html>
- ベストアンサー
- JavaScript
