ここから本文です

複数のJavaScriptを作動させる方法を教えてください。 初心者でございます...

aps********さん

2019/6/102:22:44

複数のJavaScriptを作動させる方法を教えてください。


初心者でございます。
テキストボックスを含めたJavaScriptを並べていくと動作しなくなってしまいます。

それぞれを独立して作動させるために、何をしたらいいかを勉強させてください。

例えば、こちらのコードで4つを並べた場合、
1と3は作動してくれるのですが、2と4は動いてくれません。
(4の<form name="keisan2">だけ変更していますが、他はコピペで並べただけです、、)

こちらのコードに修正をかけていただければと思います。

また、複数の様々なJavaScriptを並べていく場合、
それぞれを独立して作動させるための注意点などありましたらご教示願いたく思います。


恐れ入りますが、よろしくお願いいたします。

--------------------------------------------

1
<input type="text" value="" id="text" placeholder="文字を入力" />
<button type="button" onclick="copy()">コピー</button>

<script>
function copy() {
let text = document.getElementById('text');
text.select();
document.execCommand('copy');
}
</script>


<br><br>


2
<input type="text" value="" id="text" placeholder="文字を入力" />
<button type="button" onclick="copy()">コピー</button>

<script>
function copy() {
let text = document.getElementById('text');
text.select();
document.execCommand('copy');
}
</script>


<br><br>


<form name="keisan">
3
<input type="text" value="" placeholder="数字を入力">+
<input type="text" value="" placeholder="数字を入力">
<input type="button" value="計算" onclick="tasu()">
</form>

<script>

function tasu()
{
var num1=parseInt(document.keisan.elements[0].value);
var num2=parseInt(document.keisan.elements[1].value);

alert(num1+num2);
}
</script>



<form name="keisan2">
4
<input type="text" value="" placeholder="数字を入力">+
<input type="text" value="" placeholder="数字を入力">
<input type="button" value="計算" onclick="tasu()">
</form>

<script>

function tasu()
{
var num1=parseInt(document.keisan.elements[0].value);
var num2=parseInt(document.keisan.elements[1].value);

alert(num1+num2);
}
</script>

閲覧数:
41
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

y_h********さん

2019/6/105:58:21

1と2のテキストボックスについているidが同じなのがいけないんだと思います。
idはドキュメント内で一意です。
javascriptからも同じidでテキストボックスを取得しようとしているので、多分2のjavascriptは、ただ1をもう一度書いているだけになっています。
4は、フォームのnameがkeisan2になっているのに、javascriptからはkeisanで取得しているので、3のフォームに対して何かしていることになります。

2のテキストボックスのidを変えて、javascriptからもそのidを指定して取得すること。
4のjavascriptで、keisan2を指定して取得すること。
これで動くと思います。

  • 質問者

    aps********さん

    2019/6/106:25:10

    ありがとうございます。
    id等をいじってみましたが、どうしてもうまくいかず分かりません、、
    よろしければどこを修正するべきかお教えいただけないでしょうか、、

  • その他の返信(2件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

ベストアンサー以外の回答

1〜1件/1件中

leg********さん

2019/6/109:44:27

1と2、3と4は、
それぞれ同じ処理をしようとしているのだから
関数は2つあれば済ませられます。

>複数の様々なJavaScriptを並べていく場合、
それぞれを独立して作動させるための注意点などありましたら・・・

いったい、どこの所の処理をさせたいのかを
ハッキリさせることです。

つまり、オブジェクトを特定する、ということですね。

動くサンプルを試作してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>問題</title>

<style>
/* CSS AREA */
</style>

<script>
//複写関数
function copy(obj) {
obj = document.forms[obj].elements[0];

if(obj.value!=""){
obj.select();
document.execCommand('copy');
alert("以下をコピーしました\n>" + obj.value);
obj.blur();
}

return false;

}

//加算関数
function tasu(obj) {
var num1 = document.forms[obj].elements[0].value;
var num2 = document.forms[obj].elements[1].value;

if(num1!="" && num2!=""){
alert(obj.slice(-1) + "番の答えは " + (num1*1 + num2*1));
}

return false;

}
</script>

</head>
<body>
<h2>複数のJavaScriptを作動させる方法</h2>

<form name="form1">
<strong>1</strong>
<input type="text" value="" placeholder="文字を入力" />
<input type="button" value="コピー" onclick="copy('form1')">
</form>

<form name="form2">
<strong>2</strong>
<input type="text" value="" placeholder="文字を入力" />
<input type="button" value="コピー" onclick="copy('form2')">
</form>

<form name="form3">
<strong>3</strong>
<input type="text" value="" placeholder="数字を入力" size="7">+
<input type="text" value="" placeholder="数字を入力" size="7">
<input type="button" value="計算" onclick="tasu('form3')">
</form>

<form name="form4">
<strong>4</strong>
<input type="text" value="" placeholder="数字を入力" size="7">+
<input type="text" value="" placeholder="数字を入力" size="7">
<input type="button" value="計算" onclick="tasu('form4')">
</form>

</body>
</html>

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる