• 締切済み

エラーがわかりません。

下記のHTMLの記述ですが、HTML内のvalueがうまく引き渡されません。 どなたかわかる方がおりましたら、教えてください。 <body> <p id="hoge">OASIS</p> <script type="text/javascript"> function change(){ var c=document.getElementById('submit').value; console.log(c); //document.body.bgColor="red"; } </script> <button onClick="change()" id="submit" value="1">Change</button> </body> </html>

  • HTML
  • 回答数1
  • ありがとう数0

みんなの回答

  • notnot
  • ベストアンサー率47% (4846/10257)
回答No.1

valueの前が空白じゃなくて全角空白になってます。

関連するQ&A

  • HTMLのボタンについて質問です。

    現在、ボタンを押したら背景色が変わるプログラムを作成中ですが、うまく切り替わりません。自分としては、value=1をあらかじめ設定しておき、そこで押される度に関数内で、valueの値をプラスしていき、if文で切り替えられるのかなと考えました。 どなたかわかる方おりましたら、回答ください。 またbuttonのvalueなど勝手に増やしても大丈夫なのでしょうか? それとも増やせないのでしょうか? <html> <head> <title>element.childNodes - エレメントの子ノードリストを取得</title> </head> <body> <p id="hoge">OASIS</p> <script type="text/javascript"> function change(){ var c=document.getElementById("submit").value; if(c%2==0){ document.body.bgColor="red"; } else{ document.body.bgColor="black"; } c++; //document.body.bgColor="red"; } </script> <input type="button" id="submit" value="1" onclick="change()"> </body> </html>

    • ベストアンサー
    • HTML
  • JSについて教えてください

    現在ドットインストールというサイトでJavaScriptを勉強しています 今割り勘電卓という物を作っています 完成はしていませんが以下のコードは打ち込まれた数字がきちんと取得されているかを確かめている段階です。 ですがconsole.logに表示されませんなぜでしょうか? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <h1>割り勘電卓</h1> <p>支払額:<input type = "text" id = "amount"></p> <p>人数:<input type = "text" id = "num"></p> <p><input type = "button" value = "計算" onclic = "getResult();"></p> <p id = result></p> <script> function getResult(){ var amount = document.getElementById('amount').value; var num = document.getElementById('num').value; console.log(amount); console.log(num); } </script> </body> </html>

  • JavaScript Eventのタイミング

    Eventの挙動を学ぶために、簡単なスクリプトを作成しました。 テキストボックスに文字列を入れて、Submitボタンを押すと、 テキストボックスの下に(innerHTMLで)入力文字が表示され、 ボタン自体も入力文字になるというものです。 しかし、テキストに文字を入力し、Submitを押してもボタン・innerHTMLともに文字は変化しません。このままリロードをすると変化します。 挙動からして、マウスクリック自体は反応していないが、リロードによりイベントハンドラが動作しているように見受けられます。 イベントハンドラはonclickに代入しているためなぜこのようになるのか わかりません。 できるだけ、JavascriptとHTMLを分離したく外だしのファイルで 実現したいと思っています。 考え方、(比較的平易な)参考資料などありましたら教えていただけないでしょうか? HTMLで<body onload="init()">として、JavaScriptでは以下のように記述しています。 function init(){ document.getElementById("button").click = change(); } function change(){ keyword = document.getElementById("keyword").value; document.getElementById("input").innerHTML = keyword; document.getElementById("button").value = keyword; }

  • 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>

  • ボタンに書かれている文字の入れ替え

    2つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 alert(obj1)、alert(obj2)などとして、A,Bともに読み込まれているようなのですが、alert(tmp)の時はundefinedがでます。 どこが間違っているのかよろしければ教えてください。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>勉強中</title> </head> <body> <script> function change_alphabet() { var tmp; var obj1 = document.getElementById("button_1").value; var obj2 = document.getElementById("button_2").value; // alert(obj1); // alert(obj2); tmp = obj1.innerHTML; // alert(tmp); obj1.innerHTML = obj2.innerHTML; obj2.innerHTML = tmp; // alert(obj2); } </script> < input type = "button" id = "button_1" value = "A" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > < input type = "button" id = "button_2" value = "B" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > <body> </html>

  • 複数ボタンのクリックイベント

    JavaScriptのイベントなのか変数のスコープなのかで質問がございます。 (一番下に全ソースを貼りました。見づらくて申し訳ありません。) htmlに複数の似た名前のボタンがあります。 名前:button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ 望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) {    document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。 私の認識、以下です。  ・0~9のイベントは正しく登録されている。  ・しかし、全てがchecked(10)を呼んでいる 質問1  これを回避する方法と、その対処理由を教えて頂きたくお願い致します。   質問2(オプション)  参考になる資料を教えていただければ幸いです。  例)サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等 よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。 */ for (i=2; i<4; i++) {    document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>

  • 「オブジェクトを指定してください」とのエラー

    お世話になります。 IEにて「オブジェクトを指定してください」とのエラーが発生します。 原因はどこにあるでしょうか?ご教示ください。 また、このような事態に陥らないための対策等をあわせて教えていただけると助かります。下記コード。 <html> <head> <title>test</title> <script type="text/javascript"> function getin(){ test = document.getElementById("output").innnerHTML ; alert test ; } </script> </head> <body> <p id="output"></p> <p><input type="button" value="InnerHTML" onClick="getin()"></p> </script> </body> </html>

  • [javascript][IE] textarea内の改行を消す方法を教えてください。

    テキストエリア内の改行をreplaceで除去したいのですが、FireFoxではうまくいくのですがIEではうまく動作しません。 下記のようなソースです。 IEではどのように書けば良いのでしょうか。 <html> <head> <script type="text/javascript" language="javascript"> function change_box(){ temp = document.getElementById("in").value; temp = temp.replace(/\n/g,""); document.getElementById("out").value = temp; } </script> </head> <body> <form> <textarea id="in" rows="3" > 一行目 二行目 三行目 </textarea><br /> <textarea id="out" rows="3" ></textarea><br /> <input type="button" value="変換" onclick="change_box()"> </form> </body> </html>

  • ループ、プログラムなのに!?

     以下のプログラムは、ただの乗算と、その合計を計算するだけなのに、なんでfor (var i = 1; i < 4; i++) {  のループ、プログラムなのですか?  もし同じ計算結果のダイアログBOXで、Javaの範疇で組むのであれば、他にどんなプログラムがあるのですか?  よろしくお願いします。 <HTML> <HEAD> <TITLE>ループ</TITLE> <script tytpe="text/javascript"> <!-- function calc(){ var alltotal = 0; for (var i = 1; i < 4; i++) { var price = document.getElementById("price" + i).innerHTML; var num = document.getElementById("num" + i).value; var total = price * num; document.getElementById("total" + i).innerHTML = total; alltotal += total; } document.getElementById("alltotal").innerHTML = alltotal; } </script> </HEAD> <body> <p><span id="price1">100</span><input id="num1" value="0" /><span id="total1">1の合計</span></p> <p><span id="price2">200</span><input id="num2" value="0" /><span id="total2">2の合計</span></p> <p><span id="price3">300</span><input id="num3" value="0" /><span id="total3">3の合計</span></p> <div id="alltotal">合計</div> <button onclick="calc()">計算</button> </body> </HTML>

  • リスト値を変更したときに連動して他の値を変えたいのですが

    おはようございます。 JavaScriptの質問です。 ボタン1とテキストボックスとリストボックスがあり、 ボタン1を押すとリストボックスの選択行を0にして テキストボックスに選択した行の行数を出そうとしています。 リストボックスを手動で変更した場合は リストボックスの値が表示されるのですが ボタンによってリストボックスの値が変わったときに テキストの値を変えることはできないのでしょうか? 以下ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>JAVATEST</TITLE> </HEAD> <BODY > <P align="center"><B>TEST<BR> </B></P> <P align="center"><BR> </P><center> <script language="javascript"> <!-- function ChangeTxt() { if (document.getElementById("List").selectedIndex=="0"){ document.getElementById("txtText").value="SUCCESS"; }{ document.getElementById("txtText").value=document.getElementById("List").selectedIndex; } } function ChangeListID() { document.getElementById("List").selectedIndex="0"; } //--> </script> <FORM name="frmForm"><INPUT type="button" ID="button1" name="btnGo" value="TEST" onClick= "ChangeListID()"> <INPUT size="20" type="text" ID="txtText" name="txtText" onChange= "ChangeTxt()"> <tr> <TD align="right"><FORM><SELECT name="List" id="List" onChange="ChangeTxt()"> <OPTION value="1">Item1</OPTION> <OPTION value="2">Item2</OPTION> <OPTION value="3">Item3</OPTION> </SELECT></FORM></TD></tr> </FORM> </center> </BODY> </HTML> どなたかおわかりになる方よろしくお願いします。

専門家に質問してみよう