中小企業の働き方改革をサポート>>

javascript勉強中の身なのですが、わからない所があったのでご教授お願いいたします。

勉強のため購入した本にあったサンプルの一部に、下記のような英字のボタンを作成する箇所がありました。
<script type="text/javascript">
var alpha="abcdefghijklmnopqrstuvwxyz";
var i;
for (i=0;i<26;i++){
document.write("<input type='button' onclick='disp(this)' value='"+alpha.charAt(i)+"' />");
if (alpha.charAt(i)=="m") {
document.write("<br />")
};
}
</script>

上記で問題なく動作しているのですが、input内のvalue='"+alpha.charAt(i)+"'の+が何故必要なのかよくわかりません。
もしかしたら基本的な事なのかもしれないですが、なぜ+が必要なのか疑問に思っている部分なのでお手数ですがご教授お願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

document.write("");


として書き出す時、""内にJavaScriptは書けません。
ですから"を一旦"で閉じ、+としてalpha.charAt(i)が書かれています。

変数に代入する時も同様です。
var word = "abc";
として、

var str = "あああword";
と書いてもstrには
あああword
が代入されます。

var str = "あああ"+word;
と記載することで、
あああabc
を代入できます。

この場合の+は足し算のプラスではなく、続けて書きますよ。
という指令のようなものですね。
    • good
    • 0
この回答へのお礼

なるほど。そういうことだったんですね。

例を出していただいて凄くわかりやすかったです。

もやもやしていた部分が解決出来ました。
ありがとうございました(^^)

お礼日時:2011/05/17 20:46

以下のようなhtmlを得たいから:



<input type='button' onclick='disp(this)' value='a' type='button' />
<input type='button' onclick='disp(this)' value='b' type='button' />
 ……略……
<input type='button' onclick='disp(this)' value='z' type='button' />

添付図は、IE9の開発者ツールでの解析結果。

a、b、……、zをfor文で生成しているという。
「javascriptのボタン作成について」の回答画像2
    • good
    • 0
この回答へのお礼

ありがとうございます。
解決いたしました。

お礼日時:2011/05/17 20:51

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q下の様にjavaScriptでボタンを追加したいのですが、

下の様にjavaScriptでボタンを追加したいのですが、
onclickイベントがHTMLにかかれません。
どうすればよろしいでしょうか。

よろしくお願いします。

var ele = document.createElement('input');
ele.type = 'button';
ele.value = 'ご意見へ';
ele.name = 'fNext';
ele.onclick = "sendRequest('FE0041')";
objct[0].parentNode.appendChild(ele);

Aベストアンサー

既に回答がされていますが…

>onclickイベントがHTMLにかかれません。
ele.onclick = "sendRequest('FE0041')";
では文字列の『sendRequest('FE0041')』がonclick属性として設定されます。
append後にその要素のonclick属性を表示させてみれば、一応、設定されているようです。

ただし、文字列なのでスクリプトとしては実行されません。

function sendRequest(a) {} のような処理を実行したければ、No1様のような方法をとればよろしいかと。

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QボタンのID名を取得するには?

押されたボタンのid名を取得するにはどのように記述したらよいのでしょうか?

<input type="button" value="ボタン" id="push" onClick="click(this)">

function click(obj)
{
 var getId = obj.elements.id;
}

上記では取得できませんでした。
すみませんがお分かりの方いましたらよろしくお願いします。

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" lang="ja" xml:lang="ja">
<head>
<title>Q3381972 TestCase 1</title>
<link href="css/design.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript">
function invoke(obj)
{
var Id = obj.id;/* DOM Level 1 Interface HTMLElement */
var Id2 = obj.getAttribute("Id"); /* DOM Level 1 Core Interface Element 俺は断然こっちが好き */

alert("1" + Id);
alert("2" + Id2);
}
</script>
</head>
<body>
<!-- 何かの予約語なのか,click関数という名前では発動しなかった -->
<p><input type="button" value="ボタン" id="push" onClick="invoke(this)" /></p>

</body>
</html>

<!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" lang="ja" xml:lang="ja">
<head>
<title>Q3381972 TestCase 1</title>
<link href="css/design.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript">
function invoke(obj)
{
var Id = obj.id;/* DOM Level 1 Interface HTMLElement */
var Id2 = obj.getAttribute("Id"); /* DOM Level 1 C...続きを読む

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qなぜ、unexpected T_VARIABLEになるのでしょうか? 

WindowsXP機に、PHP5とPEARを入れています。
あるWebサイトに記述されている下記のサンプルスクリプトをコピペして(PEARは絶対パスに書き換えて)実行しましたが、次のエラーが出ます。全角スペースは入っていませんし、原因が分かりません。
なぜ、unexpected T_VARIABLEになるのでしょうか? どのようにすれば解決できるでしょうか?
エラー
Parse error: syntax error, unexpected T_VARIABLE, expecting T_FUNCTION in C:\Program Files\Apache Group\Apache2\htdocs\HQuickForm_test\QfrmSmpl.php on line 14

サンプルスクリプト一部抜粋:
<?php
require_once("C:\php\PEAR\HTML\QuickForm.php");
class QfrmSmpl{
var $_form;
function QfrmSmpl($sbmtAct){
$this -> _form = new HTML_QuickForm("frmSmpl","post",$sbmtAct); }
function setForm(){
$this -> _form -> addElement("text","txtName","名前(全角日本字):");
$this -> _form -> addElement("text","txtEname","名前(半角英字):");
$this -> _form -> addElement("text","txtEmail","E-mail:");
$this -> _form -> addElement("text","txtEmail2","E-mail(確認用):");
$this -> _form -> addElement("textarea","txtrComment","コメント:");
}
$this -> _form -> applyFilter(__ALL__,"trim");
$this -> _form -> addRule("txtName","名前を入力!","required", null, "client");
$this -> _form -> addRule("txtEname","半角英字で入力!","alphanumeric", null, "client");
$this -> _form -> addRule(array("txtEmail","txtEmail2"),"メールアドレス不一致!","compare", null, "client");
$this -> _form -> addRule("txtEmail","無効なメールアドレス!","email", null, "client");
$this -> _form -> addRule("txtrComment","コメントを入力!","required", null, "client");
$this -> _form -> setRequiredNote("<font color='red'>*</font>必須入力");
}
以下略

WindowsXP機に、PHP5とPEARを入れています。
あるWebサイトに記述されている下記のサンプルスクリプトをコピペして(PEARは絶対パスに書き換えて)実行しましたが、次のエラーが出ます。全角スペースは入っていませんし、原因が分かりません。
なぜ、unexpected T_VARIABLEになるのでしょうか? どのようにすれば解決できるでしょうか?
エラー
Parse error: syntax error, unexpected T_VARIABLE, expecting T_FUNCTION in C:\Program Files\Apache Group\Apache2\htdocs\HQuickForm_test\QfrmSmpl.php...続きを読む

Aベストアンサー

検索したら似たようなスクリプトがあったんですが
http://digit-01.com/ownpage/ownpage_quickform.html
これの
//フォーム入力チェックの定義(, null, "client")で、クライアント側でチェック function checForm(){
は function checForm(){ の前で改行が必要なようです

Q外部ファイルを実行

javascriptで
<script type="text/javascript" src="test.js" ></script>
を記述すると、
HTML読み込み時にtest.jsを実行するのですが、
ボタンクリック時に外部ファイルを実行するコードはどのように記述すればいいのでしょうか?

よろしくお願いします。

Aベストアンサー

当方、本日手が空いたので色々試行錯誤してみましたが
javascriptを動的に呼び出すのは少し難しいようですな。

[test.js]
function test() { alert('moge'); }
というファイルがあるとして、


[例1]
<input type='button' value='go' onclick='on()' />
<script type='text/javascript'><!--
function on(){
 document.write('<script type="text/javascript" src="./test.js"></script>');
}
// --></script>

これだとグローバルスコープでtest.jsの定義が使えるのですが、
画面が再描画されるため意図した動作をせず。
再描画させず、意図させた場所のみ更新させHTMLparseを行わせるという挙動ってできるのですかねぇ。


[例2]
<input type='button' value='go' onclick='on()' />
<script type='text/javascript'><!--
var jsStr = "";
function on(){
 getCode();
 eval(jsStr);
 test();
}

function getXMLHTTPObj(){
 try{
  return new ActiveXObject("Msxml2.XMLHTTP");
 }catch(e){
(snip.)
 }
}
function getCode(){
 // make instanse
 var reqSend = getXMLHTTPObj();
 // get instanse
 if(reqSend){
  reqSend.onreadystatechange = function(){
   if(reqSend.readyState == 4 ){
    jsStr = reqSend.responseText;
   }
  }
  reqSend.open('POST', "./test.js", false);
  reqSend.setRequestHeader('content-type', "application/x-www-form-urlencoded;charset=UTF-8;");
  reqSend.send();
 }
}
// --></script>

XMLHTTPで呼んでevalしてみる。
使えなくもないですが・・・・
最初から<script>で呼べよという話に。


[例3]
<script src="common1.js"></script>
<script src="common2.js"></script>
<script src="common3.js"></script>
<script src="test.js"></script>(typeはsnip)
<input type="button" onclick='test()' />

スタンダード。
必要な奴は必要なときに逐次呼ぶのが普通。


外部読み込みはprototype.jsとかにありそうな気はしますけどね。
使ったことないですが。

当方、本日手が空いたので色々試行錯誤してみましたが
javascriptを動的に呼び出すのは少し難しいようですな。

[test.js]
function test() { alert('moge'); }
というファイルがあるとして、


[例1]
<input type='button' value='go' onclick='on()' />
<script type='text/javascript'><!--
function on(){
 document.write('<script type="text/javascript" src="./test.js"></script>');
}
// --></script>

これだとグローバルスコープでtest.jsの定義が使えるのですが、
画面が再描画さ...続きを読む

QボタンをクリックでPHP文を実行

ボタンをクリックしたときのみPHP文を実行したいのですが・・・

<input type="button" onClink="<?php~?>">
でいけるかと思ったのですが、
ページ表示時に<?php~?>が実行されてしまい、うまくいきませんでした。

onClink="window.open(test.php)"
という方法以外でお願いします。

Aベストアンサー

AjaxはもともとJavaScriptの機能である非同期通信をつかったもので。Ajaxという言語があるわけではありません

Ajaxを利用するのであれば、JavaScriptのXMLHttpRequestを使って非同期通信できるような実装をしなくてはなりません
簡単にサンプルコードで書けるほど単純なものでもありません

一般的なサーバーサイドスクリプトの動作として、
ボタンを押す->サーバーへリクエストする->サーバーが処理する->クライアントに何かしらの結果を返す(出力する)です
つまり、PHP等のサーバーサイドスクリプトは、遷移させることが大前提で動作します

ですから、ボタンを押してその場でJavaScriptと同じようにPHPが動くなんてことはありえません。
ボタンを押したらサーバーにリクエストする という動作ならば可能です。

つまり
質問で言われているような
onClink="window.open(test.php)"

<form name="f1" action="test.php" method="post">
<input type="submit" name="submit" value="submit" />
</form>
等のような形になります

こういった一般的な方法だと いちいち画面が切り替わったようになってしまうのを嫌って Ajaxでコレと同じことを、画面を切り替えずに行っているだけに過ぎません

AjaxはもともとJavaScriptの機能である非同期通信をつかったもので。Ajaxという言語があるわけではありません

Ajaxを利用するのであれば、JavaScriptのXMLHttpRequestを使って非同期通信できるような実装をしなくてはなりません
簡単にサンプルコードで書けるほど単純なものでもありません

一般的なサーバーサイドスクリプトの動作として、
ボタンを押す->サーバーへリクエストする->サーバーが処理する->クライアントに何かしらの結果を返す(出力する)です
つまり、PHP等のサーバーサイドスクリプトは、...続きを読む

Qimgのsrcに値を設定するには

<img src="photo.jpg" title="" id="2" />
document.getElementById('2').setAttribute('title',代入値);

のようにsrcのほうにも値を設定したいのですが、単純に

document.getElementById('2').setAttribute('src',代入値);

のようにしてもできませんでした。srcに値を設定するにはどうしたらよいでしょうか?

Aベストアンサー

まず、数字だけのidをつけるのは、やめたほうがいいでしょう。(参考URL)

さて、本題ですが、私のところでは
 document.getElementById('2').setAttribute('src','photo2.jpg');
のようにしたところ、上手くいきました…
文字列の前後に「''」をちゃんとつけていますか?

参考までに、他に
 document.getElementById('2').src = 'photo2.jpg';
という、単純な方法もあります。

参考URL:http://www.kanzaki.com/docs/html/htminfo12.html#name-syntax


人気Q&Aランキング

おすすめ情報