ジメジメする梅雨のお悩み、一挙解決! >>

JavaScriptのカスタムの段階で詰まってしまいましたのでお知恵お貸し頂ければと思います。

積算の自動計算フォームを作成しようとしてるのですが、下記URLを参考にselectタグだけではなく、radioボタンやcheckboxでも計算できるようにしたいと思いカスタムしようとしているんですがNaNと表示されてしまい、うまくいきません。
何か指定が間違っているのでしょうか。

こちらのサイトを参考に作っています。
http://www.tagindex.com/javascript/form/comp1a.h …
宜しくお願いします。

A 回答 (1件)

たとえばこんな感じ



<script>
document.addEventListener('change',function(e){
var t=e.target;
if(t.nodeName=="INPUT" ||t.nodeName=="SELECT"){
var num=0;
var f=t.form;
for(var i=0;i<f.length;i++){
if(f[i].name=="ans") continue;
if((f[i].type=="checkbox" ||f[i].type=="radio") && f[i].checked ||f[i].type=="text") num+=parseInt(f[i].value);
if(f[i].type=="select-one") num+=parseInt(f[i].options[f[i].selectedIndex].value);
}
f.elements["ans"].value=num;
}
});
</script>
<form>
<input type="checkbox" name="a" value="100">100
<input type="checkbox" name="b" value="200">200
<input type="checkbox" name="c" value="300">300
<input type="radio" name="d" value="0" checked>0
<input type="radio" name="d" value="400">400
<input type="radio" name="d" value="500">500
<select name="e">
<option value="0">0</option>
<option value="600">600</option>
<option value="700">700</option>
</select>
<input type="text" name="f" value="0"><br>
ans:<input type="text" name="ans" value="0" readonly>
</form>
    • good
    • 0
この回答へのお礼

とても参考になり助かりました!
ありがとうございました^^

お礼日時:2017/06/18 14:13

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

このQ&Aを見た人はこんなQ&Aも見ています

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

Qチェックボックスやラジオボタンでの計算

チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております

ソース途中からですが…↓
<tr>
<Td Valign="middle" Width="80">部数選択</td>
<Td Align="center" Valign="middle"><必須></td>
<Td>
<Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br>
<Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br>
<Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,000円<Br>
<Input Type="radio" Name="pay" Value="300部 40000円">300部 ¥40,000円<Br>
<Input Type="radio" Name="pay" Value="300部以上 ※お見積もりいたします">300部以上 ※お見積もりいたします<Br>
</td>
</tr>
<tr>
<Td Valign="middle" Width="80">オプション選択<Br>(複数選択可)</td>
<Td Align="center" Valign="middle"><必須></td>
<Td>
<Input Type="checkbox" Name="op[]" value="地図を入れる">地図を入れる<Br>
<Input Type="checkbox" Name="op[]" value="先生のプロフィールを入れ">先生のプロフィールを入れる<Br>
<Input Type="checkbox" Name="op[]" value="ごあいさつを入れる">ごあいさつを入れる<Br>
<Input Type="checkbox" Name="op[]" value="生徒募集中を入れ">生徒募集中を入れる<Br>
<Input Type="checkbox" Name="op[]" value="写真を入れる">写真を入れる<Br>
<Input Type="checkbox" Name="op[]" value="ゲスト紹介">ゲスト紹介<Br>
<Input Type="checkbox" Name="op[]" value="QRコード">QRコード<Br>
</td>
</tr>

といった感じです。
value はすでに、他のところで使用しています
単純に計算だけを目的とさせているんですが、どうしたら良いでしょうか?

チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております

ソース途中からですが…↓
<tr>
<Td Valign="middle" Width="80">部数選択</td>
<Td Align="center" Valign="middle"><必須></td>
<Td>
<Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br>
<Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br>
<Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,00...続きを読む

Aベストアンサー

<html>
<body>
<Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br>
<Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br>
<Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,000円<Br>
<Input Type="radio" Name="pay" Value="300部 40000円">300部 ¥40,000円<Br>
<Input Type="radio" Name="pay" Value="300部以上 ※お見積もりいたします">300部以<br>
<input type="text" id="a">
<input type="button" value="Get Value" onClick="viewRadioValue('pay')"><br>

<script>
function viewRadioValue(n){
var val = getRadioValue(n), s;
if(val) document.getElementById('a').value = (s=val.match(/ (\d*)円$/),(s?s[1]-0:'不明'));
}
function getRadioValue(n){
for(var i=0,e=document.getElementsByName(n),mx=e.length;i<mx;i++) if(e[i].checked) return e[i].value;
}
</script>

<html>
<body>
<Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br>
<Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br>
<Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,000円<Br>
<Input Type="radio" Name="pay" Value="300部 40000円">300部 ¥40,000円<Br>
<Input Type="radio" Name="pay" Value="300部以上 ※お見積もりいたします">300部以<br>
<input type="text" id="a">
<input type="button" value="Get Value" o...続きを読む

Qラジオボタンとチェックボックスの計算について

ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。
私が考えるに、<script language="JavaScript">~</script>の間が間違っていると思うのですがどうでしょうか?

皆様ご教授の程お願いします。

<script language="JavaScript">
<!--
// 項目の合計を計算
function ttlValue() {
chn = 10; // ラジオボタンとチェックボックスの総数
ttl = 0;
for(i=0; i<chn; i++) {
if(document.nForm.elements[i].checked) {
ttl += eval(document.nForm.elements[i].value);
}
}
document.nForm.result.value = ttl;
}
//-->
</script>
</head>
<body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000"
vlink="#ff0000">
<br>
それぞれの項目で該当する回答を1つずつ選択して下さい。
<form name="nForm">項目1<br>
<input name="ch1" value="3" checked="checked" type="radio">a<br>
<input name="ch1" value="2" type="radio">b<br>
<input name="ch1" value="1" type="radio">c<br>
<input name="ch1" value="0" type="radio">d<br>
<br>
項目2<br>
<input name="ch2" value="3" checked="checked" type="radio">a<br>
<input name="ch2" value="2" type="radio">b<br>
<input name="ch2" value="1" type="radio">c<br>
<input name="ch2" value="0" type="radio">d<br>
<br>
項目3<br>
<input name="ch3" value="3" checked="checked" type="radio">a<br>
<input name="ch3" value="2" type="radio">b<br>
<input name="ch3" value="1" type="radio">c<br>
<input name="ch3" value="0" type="radio">d<br>
<br>
項目4<br>
<input name="ch4" value="1" checked="checked" type="radio">a<br>
<input name="ch4" value="0" type="radio">b<br>
<br>
項目5<br>
<input name="ch5" value="1" checked="checked" type="radio">a<br>
<input name="ch5" value="0" type="radio">b<br>
<br>
オプションがあれば選択して下さい。(複数選択可)<br>
<input name="bx1" value="1" type="checkbox">1<br>
<input name="bx1" value="1" type="checkbox">2<br>
<input name="bx1" value="1" type="checkbox">3<br>
<input name="bx1" value="1" type="checkbox">4<br>
<input name="bx1" value="1" type="checkbox">5<br>
<input name="bx1" value="1" type="checkbox">6<br>
<input name="bx1" value="1" type="checkbox">7<br>
<input name="bx1" value="1" type="checkbox">8<br>
<input name="bx1" value="1" type="checkbox">9<br>
<input name="bx1" value="1" type="checkbox">10<br>
<input name="bx1" value="1" type="checkbox">11<br>
<input name="bx1" value="1" type="checkbox">12<br>
<input name="bx1" value="1" type="checkbox">13<br>
<input name="bx1" value="1" type="checkbox">14<br>
<input name="bx1" value="1" type="checkbox">15<br>
<input name="bx1" value="1" type="checkbox">16<br>
<input name="bx1" value="1" type="checkbox">17<br>
<input name="bx1" value="1" type="checkbox">18<br>
<input name="bx1" value="1" type="checkbox">19<br>
<input name="bx1" value="1" type="checkbox">20<br>
<input name="bx1" value="1" type="checkbox">21<br>
<input name="bx1" value="1" type="checkbox">22<br>
<input name="bx1" value="1" type="checkbox">23<br>
<input name="bx1" value="1" type="checkbox">24<br>
あなたの獲得したメダルは何色?<br>
<select name="ch2">
<option value="0" selected="selected">なし</option>
<option value="5">金メダル</option>
<option value="3">銀メダル</option>
<option value="1">銅メダル</option>
</select>
<br>
<br>
メダル獲得まで何年かかりましたか?<br>
項目6<br>
<input name="ch6" value="10" checked="checked" type="radio">20年以上<br>
<input name="ch6" value="5" type="radio">19年~10年<br>
<input name="ch6" value="3" type="radio">9年~5年<br>
<input name="ch6" value="1" type="radio">4年~3年<br>
<input name="ch6" value="0" type="radio">2年未満<br>
<br>
<input value="合計金額を計算" onclick="ttlValue()" type="button"><br>
<br>
合計<input name="result" size="10" type="text">
</form>
<br>

ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。
私が考えるに、<script language="JavaScript">~</script>の間が間違っていると思うのですがどうでしょうか?

皆様ご教授の程お願いします。

<script language="JavaScript">
<!--
// 項目の合計を計算
function ttlValue() {
chn = 10; // ラジオボタンとチェックボックスの総数
ttl = 0;
for(i=0; i<chn; i++) {
if(document.nForm.elements[i].checked...続きを読む

Aベストアンサー

<script> が原因ですね。
もっと簡単に elements を全て調べれば良いのではないでしょうか。
値を読み取る対象を限定さえすれば、事故は起きないでしょう。

<script>
function ttlValue() {
var inps = document.nForm.elements;
var chn = inps.length; // 総数はこれで取れる
var ttl = 0;
for(var i=0; i<chn; i++) {
var inp = inps[i];
if(inp.checked || inp.options) {
// 選択された radio / 選択された checkbox / select に限定
ttl += parseInt(inp.value);
}
}
document.nForm.result.value = ttl;
}
</script>

余談ですが、コーディングに際しては以下を心がけてください。

変数の var 宣言をちゃんと付ける - 名前空間汚染によるバグ回避
二回以上使う値は変数にする - 読み易くなりロジックが明確になる、そして性能向上
eval を安易に使わない - 安全性と性能とデバッグ都合のため

<script> が原因ですね。
もっと簡単に elements を全て調べれば良いのではないでしょうか。
値を読み取る対象を限定さえすれば、事故は起きないでしょう。

<script>
function ttlValue() {
var inps = document.nForm.elements;
var chn = inps.length; // 総数はこれで取れる
var ttl = 0;
for(var i=0; i<chn; i++) {
var inp = inps[i];
if(inp.checked || inp.options) {
// 選択された radio / 選択された checkbox / select に限定
ttl += parseInt(inp.value);
}
}
document.nForm.result.v...続きを読む

Qjquery と javasprict

サイトを作成中です。
まず下記のとおりjqueryでheader、side、footerをインクルードしています。

<script>
$(function() {
$("#header").load("header.html");
$("#side").load("side.html");
$("#footer").load("footer.html");
});
</script>

次に、コピーライトの年を自動更新したく、footer.htmlの中にjavasprictを入れました。

Copyright&copy; 2014
 <script type="text/javascript" language="JavaScript">
<!--
TYnow = new Date();document.write( ' - ' + TYnow.getFullYear() );
// -->
</script> ○○○○ CO.,Ltd.

すると、全体が「-2017」としか表示されなくなってしまいました。
どうすればいいのでしょうか、どなたか教えて下さい。
宜しくお願いいたします。

サイトを作成中です。
まず下記のとおりjqueryでheader、side、footerをインクルードしています。

<script>
$(function() {
$("#header").load("header.html");
$("#side").load("side.html");
$("#footer").load("footer.html");
});
</script>

次に、コピーライトの年を自動更新したく、footer.htmlの中にjavasprictを入れました。

Copyright&copy; 2014
 <script type="text/javascript" language="JavaScript">
<!--
TYnow = new Date();document.wr...続きを読む

Aベストアンサー

ANo4です。

jQueryを利用なさっているのでしたね。
動作すれば良いのであれば、footer.htmlの内容を、

Copyright&copy; 2014<span id="copyright"></span> ○○○○ CO.,Ltd.

とでもしておいて、スクリプトの
$("#footer").load("footer.html"); の部分を

$("#footer").load("footer.html", function(){
var d = new Date();
$("#copyright").html(" - " + d.getFullYear());
});

のようにすれば動作すると思います。
(これだと、わざわざloadする意味がほとんどありませんけれど…)

※ idが重複するような場合は、違うものに変えて下さい。

QJavaScript Cookieについて

いつもお世話になっております。

ご教示お願い致します。

<input type="text" name="uname">
に、名前を記憶させておきたいのですが、
どのようにすればいいのでしょうか??

現時点で
名前入力→特定の位置にあいさつみたいな感じで出力
というのまで、あるサイトを参考にできたのですが、

テキストに出力が
いろんなサイトを見て参考にしてみているものの
上手いこといきません・・



--------------test.pl--------------
#!/usr/bin/perl

print "Content-type: text/html; charset=UTF-8\n\n";

print <<END;
<!DOCTYPE>
<html>
<head>
<meta name="robots" content="noindex">
<title>テストページ</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>

<script language="JavaScript">
<!--
// 名前の呼び出し
name = loadCookie();
if(name == "") document.write("初めまして");
else document.write("ようこそ<FONT color=#990000>" + name + "</FONT>さん。");
//-->
</script>


<form name="form" action="#" method="post">
<input type="text" name="uname">
<input type="submit" name="send" value="送信" onClick="saveCookie(this.form.uname.value)">
</form>

</body>
</html>
END
exit;
1;

function saveCookie(dValue) {
cName = "uName="; // ユーザー名
cDays = 365; // データの保存日数
setPre = new Date();
setPre.setTime(setPre.getTime() + (cDays*1000*24*3600));
prd = setPre.toGMTString();
document.cookie = cName + escape(dValue) + ";expires=" + prd;
}
--------------test.pl--------------

--------------test.js--------------
function loadCookie() {
cData = "";
cName = "uName="; // ユーザー名
cCookie = document.cookie+";";
str = cCookie.indexOf(cName);
if(str != -1) {
end = cCookie.indexOf(";",str);
cData = unescape(cCookie.substring(str + cName.length, end));
}
return cData;
}
--------------test.js--------------

いつもお世話になっております。

ご教示お願い致します。

<input type="text" name="uname">
に、名前を記憶させておきたいのですが、
どのようにすればいいのでしょうか??

現時点で
名前入力→特定の位置にあいさつみたいな感じで出力
というのまで、あるサイトを参考にできたのですが、

テキストに出力が
いろんなサイトを見て参考にしてみているものの
上手いこといきません・・



--------------test.pl--------------
#!/usr/bin/perl

print "Content-type: text/html; charset=...続きを読む

Aベストアンサー

こんな感じです

<script>
window.onload=function(){
var v=getCookie('uname');
document.querySelector('[name=uname]').value=v;
}
function save(n,v){
setCookie(n,v);
}
function setCookie(key,val,url){
tmp = key+"="+escape(val)+";";
tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
if(url){
tmp += "domain="+getDomain(url)+";";
tmp += "path="+getDomainPath(url)+";";
}
document.cookie = tmp;
};
function getCookie(key){
tmp = document.cookie+";";
tmp1 = tmp.indexOf(key,0);
if(tmp1 != -1){
tmp = tmp.substring(tmp1,tmp.length);
start = tmp.indexOf("=",0);
end = tmp.indexOf(";",start);
return(unescape(tmp.substring(start+1,end)));
}
return("");
};

function delCookie(key){
expiredate = new Date();
expiredate.setYear(expiredate.getYear()-1);
tmp = key+"=;";
tmp += "expires="+expiredate.toGMTString();
document.cookie = tmp;
};

</script>

<input type="text" name="uname" onchange="save(this.name,this.value)">

こんな感じです

<script>
window.onload=function(){
var v=getCookie('uname');
document.querySelector('[name=uname]').value=v;
}
function save(n,v){
setCookie(n,v);
}
function setCookie(key,val,url){
tmp = key+"="+escape(val)+";";
tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
if(url){
tmp += "domain="+getDomain(url)+";";
tmp += "path="+getDomainPath(url)+";";
}
document.cookie = tmp;
};
function getCookie(key){
tmp = document.cookie+";";
...続きを読む

Qjavascript 特定のタグのidの存在を数える

指定した要素にidがあるかないかをカウントする場合は、どのうよに書いたらよいでしょうか?

下記の場合は、Pタグの全てを数えてしまうのでアラートでの出力は6になります。idが設定されているものだけ数えたいので、出力は、3になるようにしたいのですが、どのようにしたら、よいでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>

<script type="text/javascript">
window.onload = function () {
var allParas = document.getElementsByTagName("p");
var num = allParas.length;
alert("P要素には" + num + " 個の idが存在します。");
};
</script>

<p id ="test_1">テスト</p>
<p>テスト</p>
<p id ="test_2">テスト</p>
<p>テスト</p>
<p id ="test_3">テスト</p>
<p>テスト</p>


</body>
</html>

指定した要素にidがあるかないかをカウントする場合は、どのうよに書いたらよいでしょうか?

下記の場合は、Pタグの全てを数えてしまうのでアラートでの出力は6になります。idが設定されているものだけ数えたいので、出力は、3になるようにしたいのですが、どのようにしたら、よいでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>

<script type="text/javascript">
window.onload = function () {
var allParas = doc...続きを読む

Aベストアンサー

window.onload = function () {
var num = document.querySelectorAll("p[id]").length;
alert("P要素には" + num + " 個の idが存在します。");
};

QjQueryのダウンロードファイルについて

このサイトhttp://bxslider.com/のシートに書かれている<script src="/js/jquery.bxslider.min.js"></script><font></font>と<link href="/lib/jquery.bxslider.css" rel="stylesheet" />をダウンロードしてファイルをhp77と言うフォルダに格納しました。このシートにはhp77と書く必要があるのですか? それとcssのファイルを開いてコピーしたりと、かれこれ4日ほど取り組んでます。ド素人なもので発火する様に手直しをお願いします。

<!DOCTYPE html>
<html lang="ja">

<meta http-equiv="Content-Script-Type" content="text/javascript;

charset=UTF-8">
<head>
<title></title>
<!-- jQuery library (served from Google) --><font></font>
<script

src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<font></font>
<!-- bxSlider Javascript file --><font></font>
<script src="/js/jquery.bxslider.min.js"></script><font></font>
<!-- bxSlider CSS file --><font></font>
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
<script>

</script>
<style>

</style>
</head>

<body>
<ul class="bxslider"><font></font>
<li><img src="/images/pic1.jpg" /></li><font></font>
<li><img src="/images/pic2.jpg" /></li><font></font>
<li><img src="/images/pic3.jpg" /></li><font></font>
<li><img src="/images/pic4.jpg" /></li><font></font>
</ul>
<script>
$(document).ready(function(){<font></font>
$('.bxslider').bxSlider();<font></font>
});
</script>


</body>

</html>

このサイトhttp://bxslider.com/のシートに書かれている<script src="/js/jquery.bxslider.min.js"></script><font></font>と<link href="/lib/jquery.bxslider.css" rel="stylesheet" />をダウンロードしてファイルをhp77と言うフォルダに格納しました。このシートにはhp77と書く必要があるのですか? それとcssのファイルを開いてコピーしたりと、かれこれ4日ほど取り組んでます。ド素人なもので発火する様に手直しをお願いします。

<!DOCTYPE html>
<html lang="ja">

<meta http-equiv="Content-Script...続きを読む

Aベストアンサー

こんにちは

サーバ上でテストするのが一番確実ではありますが・・・

ご提示のHTMLの中に
 <img src="/images/pic1.jpg" />
とありますが、画像は表示できていますよね?
画像等のパス(src属性)の指定方法はご存じでしょうか?
http://www.agr.hokudai.ac.jp/useful/utile/Path_URL.htm

bxslider.min.jsやbxslider.cssを読み込むタグ(<script>や<link>)でも同じ方法で指定します。
(src属性とhref属性の部分です)
この部分に関しては、DLなさった環境と質問者様の環境は違っているはずですので、質問者様がそれぞれのファイルを置いた位置を指定できるように修正する必要があります。

また、念のためjQuryの読み込み部分のsrc属性も、
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
としておいた方が良いかも。
※この掲示板でリンクに変換されてしまわないように、(↑)では先頭の英数字のhを倍幅のhに変えてありますので、英数字に戻す必要があります。

こんにちは

サーバ上でテストするのが一番確実ではありますが・・・

ご提示のHTMLの中に
 <img src="/images/pic1.jpg" />
とありますが、画像は表示できていますよね?
画像等のパス(src属性)の指定方法はご存じでしょうか?
http://www.agr.hokudai.ac.jp/useful/utile/Path_URL.htm

bxslider.min.jsやbxslider.cssを読み込むタグ(<script>や<link>)でも同じ方法で指定します。
(src属性とhref属性の部分です)
この部分に関しては、DLなさった環境と質問者様の環境は違っているはずですので、質問者様...続きを読む

QJavaScriptによる自動計算フォーム

サンプルを読んだりは多少わかる範囲なのですが、カスタムの段階で詰まってしまいましたのでお知恵お貸し頂ければと思います。

積算の自動計算フォームを作成しようとしてるのですが、サンプルでよくあるものが固定数値×プルダウン=小計のようなものが多く、この固定数を入力フォーム、プルダウンも入力フォームに切り替えたいのですが、変更すると合計欄がNaNと表示されてしまいます。
何か指定が間違っているのでしょうか。

こちらのサイトを参考に作っています。
http://www.tagindex.com/javascript/form/comp1b.html

宜しくお願いします。

Aベストアンサー

まず、ご質問の内容についてですが・・・、
実際のコードを示せば、すぐに的確な回答がついたかもしれません。

本題に戻ります。たぶんどこかで構文ミスをしているのでしょう。
私もよくやってしまうのですが、NaN や undefined が出ます。

内容が複雑ではないので、私なりに作成してみました。
入力フォームということで、テキストボックスで良いでしょうか。

<html><head>
<script type='text/javascript'>
function keisan(){
var price1 = (document.form1.tanka1.value) * (document.form1.suryo1.value);
document.form1.kingaku1.value = price1 ;
var price2 = (document.form1.tanka2.value) * (document.form1.suryo2.value);
document.form1.kingaku2.value = price2 ;
var price3 = (document.form1.tanka3.value) * (document.form1.suryo3.value);
document.form1.kingaku3.value = price3 ;
document.form1.total.value = price1 + price2 +price3;
}
</script></head>
<body>
<form name='form1'>
<table border='1'>
<tr><td align='center'>商品</td>
<td align='center'>単価</td>
<td align='center'>数量</td>
<td align='center'>金額</td></tr>
<tr><td>商品1</td>
<td><input type='text' name='tanka1' onChange='keisan()' style='width:100px' />円</td>
<td><input type='text' name='suryo1' onChange='keisan()' style='width:50px' /></td>
<td><input type='text' name='kingaku1' style='width:100px' />円</td></tr>
<tr><td>商品2</td>
<td><input type='text' name='tanka2' onChange='keisan()' style='width:100px' />円</td>
<td><input type='text' name='suryo2' onChange='keisan()' style='width:50px' /></td>
<td><input type='text' name='kingaku2' style='width:100px' />円</td></tr>
<tr><td>商品3</td>
<td><input type='text' name='tanka3' onChange='keisan()' style='width:100px' />円</td>
<td><input type='text' name='suryo3' onChange='keisan()' style='width:50px' /></td>
<td><input type='text' name='kingaku3' style='width:100px' />円</td></tr>
<tr><td align='right' colspan=3>合計</td>
<td><input type='text' name='total' style='width:100px' />円</td></tr>
</table>
</form>
</body></html>

まず、ご質問の内容についてですが・・・、
実際のコードを示せば、すぐに的確な回答がついたかもしれません。

本題に戻ります。たぶんどこかで構文ミスをしているのでしょう。
私もよくやってしまうのですが、NaN や undefined が出ます。

内容が複雑ではないので、私なりに作成してみました。
入力フォームということで、テキストボックスで良いでしょうか。

<html><head>
<script type='text/javascript'>
function keisan(){
var price1 = (document.form1.tanka1.value) * (document.form1.suryo1.value);...続きを読む

QJavaScripptでアルバム作り

画像ファイルは1.jpgからの連番で保存さえており、
1.jpgから順に表示するプログラムを作っています。
ファイルが存在してもfilesizeとsizeプロパティーはundefinedです。
画像ファイルの数はよく変わるのでfor I=1 to 100のようにならないように作らないといけません。
なのでこのプログラムを手直ししてほしいです。
<!DOCTYPE html>
<html><head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>TeraPad</TITLE>
<script type="text/javascript"><!--
function fileCheck(){
var fileNo = 1;
var file = fileNo+".jpg";
while(file.size != -1){ // ファイルサイズを取得
document.getElementById("book").innerHTML = document.getElementById("book").innerHTML + "<img border=0 src="+file+" width=300 height=300 alt=漫画(ページ"+fileNo+")>"+fileNo;
//alert(file.size+" "+file.filesize);
if (fileNo >= 100){
alert("画像数が多すぎます。");
break;
}

fileNo=fileNo+1;
file = fileNo+".jpg";
}
}

// --></script>
</head>
<body onload="fileCheck();">
Hello.
<div id="book"></div>
</body>

画像ファイルは1.jpgからの連番で保存さえており、
1.jpgから順に表示するプログラムを作っています。
ファイルが存在してもfilesizeとsizeプロパティーはundefinedです。
画像ファイルの数はよく変わるのでfor I=1 to 100のようにならないように作らないといけません。
なのでこのプログラムを手直ししてほしいです。
<!DOCTYPE html>
<html><head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>TeraPad</TITLE>
<script type="text/javascript"><!--
function fileCh...続きを読む

Aベストアンサー

画像ファイルを 1.jpg から順に連番で在るだけ表示するプログラム例
画像を1件ずつ読み取るので、少々遅くなります。

<script>
function loader(_){
_ ; var sx = function(ev){
_ ; _ ; img = ev.currentTarget;
_ ; _ ; document.getElementById("book").appendChild(img);
_ ; _ ; fx(parseInt(img.dataset.nextNo));
_ ; };
_ ; var ex = function(ev){
_ ; _ ; img = ev.currentTarget;
_ ; _ ; console.log('nothing: ' + img.src);
_ ; };
_ ; var fx = function(no){
_ ; _ ; var img = new Image();
_ ; _ ; img.dataset.nextNo = no + 1;
_ ; _ ; img.addEventListener('load', sx, false);
_ ; _ ; img.addEventListener('error', ex, false);
_ ; _ ; img.alt = '画像(ページ@)'.replace(/@/, no);
_ ; _ ; img.src = no + '.jpg'; // start loading
_ ; };
_ ; fx(1);
}
</script>
<body onload="loader()">
<div id="book"></div>

画像ファイルを 1.jpg から順に連番で在るだけ表示するプログラム例
画像を1件ずつ読み取るので、少々遅くなります。

<script>
function loader(_){
_ ; var sx = function(ev){
_ ; _ ; img = ev.currentTarget;
_ ; _ ; document.getElementById("book").appendChild(img);
_ ; _ ; fx(parseInt(img.dataset.nextNo));
_ ; };
_ ; var ex = function(ev){
_ ; _ ; img = ev.currentTarget;
_ ; _ ; console.log('nothing: ' + img.src);
_ ; };
_ ; var fx = function(no){
_ ; _ ; var img = new Image();
_ ;...続きを読む

Aベストアンサー

こんにちは

回答が無い様なので…

>写真のようなものをネットで作りたいのです。
「ネット」とはブラウザ環境で画面に表示するといった意味合いで良いのでしょうか?
また、「写真のようなもの」と「アニメーション」しかキーワードがありませんが、アニメーションと言ってもいろいろなものが考えられるので、それによっても可能/不可能が変わってくるかもしれません。


ご存知のように、CSSでもアニメーションは可能ですので、比較的規則的なアニメーションを想定しているのならHTMLとCSSのみで実現できることでしょう。
放電現象のシミュレートのようなことを動的に行うようなイメージだとすると、プログラムを利用した方が実現しやすいのではと思います。

放電軌跡のシミュレーション的なものの例
http://www.somethinghitme.com/projects/canvaslightning/
https://blender.stackexchange.com/questions/1875/how-to-create-an-animated-electric-arc-or-lightning

あるいは、もう少し大雑把なエフェクトとしてなら…
https://gamedevelopment.tutsplus.com/tutorials/how-to-generate-shockingly-good-2d-lightning-effects--gamedev-2681


軌跡をシミュレートしてかつリアルな光の感じを出すのが良いのかもしれませんが、両方やるのはちと面倒そうなので、だいぶ手抜きですが、雷の画像を順次重ねて表示する方法を考えてみました。
まずは、重ねられるように雷の画像を加工。
かなり手抜きで10分程で透明化にしてみたものなので、あまりきれいではないかも・・・(汗)
実は、この回答は画像投稿目的の回答です。
(次の回答で、この画像を利用したサンプルを示してみます)

こんにちは

回答が無い様なので…

>写真のようなものをネットで作りたいのです。
「ネット」とはブラウザ環境で画面に表示するといった意味合いで良いのでしょうか?
また、「写真のようなもの」と「アニメーション」しかキーワードがありませんが、アニメーションと言ってもいろいろなものが考えられるので、それによっても可能/不可能が変わってくるかもしれません。


ご存知のように、CSSでもアニメーションは可能ですので、比較的規則的なアニメーションを想定しているのならHTMLとCSSのみで実現できること...続きを読む

Q【javaScript】KeyboardEventでペースト操作を実現したい

IE11で、KeyboardEventでペースト操作を実現させたく、
試行錯誤の末に以下のコードに行きつきましたが、
シンタックスエラーにはならないものの動作しません。

cripboadData.getData(”text”)で取得した値をエレメントに設定する手もありますが、
今回は、JavaScriptで実施したペースト操作をイベントリスナでつかみたいので、
KeyboardEventでのペースト操作にこだわっている次第です。

そもそもKeyboardEventでペースト操作などできないものなのでしょうか?

ご教示のほどよろしくお願いします。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<script type="text/javascript">
<!--
// ペーストされたことの確認のためのリスナ
document.getElementById('aaaaa').addEventListener("paste" , function(e){
alert("paste");
});


document.getElementById('aaaaa').focus();

var event = document.createEvent('KeyboardEvent'); // create a key event
event.initKeyboardEvent("keypress", // typeArg,
true, // canBubbleArg,
true, // cancelableArg,
null, // viewArg, Specifies UIEvent.view. This value may be null.
true, // ctrlKeyArg,
false, // altKeyArg,
false, // shiftKeyArg,
false, // metaKeyArg,
86, // keyCodeArg,
0); // charCodeArg);


document.getElementById('aaaaa').dispatchEvent(event);

-->
</script>

IE11で、KeyboardEventでペースト操作を実現させたく、
試行錯誤の末に以下のコードに行きつきましたが、
シンタックスエラーにはならないものの動作しません。

cripboadData.getData(”text”)で取得した値をエレメントに設定する手もありますが、
今回は、JavaScriptで実施したペースト操作をイベントリスナでつかみたいので、
KeyboardEventでのペースト操作にこだわっている次第です。

そもそもKeyboardEventでペースト操作などできないものなのでしょうか?

ご教示のほどよろしくお願いします。
...続きを読む

Aベストアンサー

こんにちは

イベントに詳しいわけではないのと、意図がイマイチよくわからないのですが・・・

>試行錯誤の末に以下のコードに行きつきましたが、
>シンタックスエラーにはならないものの動作しません。
ご提示のスクリプは、後半部分でkeypressイベントを発生させています。
これに対して、前半ではpasteイベントのリスナを設定しているので、このリスナが呼ばれることはないですよね?
リスナのイベントタイプをkeypressにして設定しておけば、当然、呼び出されます。

>そもそもKeyboardEventでペースト操作などできないものなのでしょうか?
イベントの発生と、実際の処理とは別のものです。
カスタムイベントとして定義することによって、pasteやpasteSpecialなどであっても、イベントを設定することは可能ですが、これが自動的に「いわゆるペースト処理」をしてくれるものを意味するわけではありません。
(単にカスタムに設けたイベントタイプの一種に過ぎないので)
それなので、そのイベントを発生させても、単純に、pasteイベントなどが発生するだけです。

例えば、リンク要素のクリックイベントにリスナを設定しておけば、クリック時に呼び出されますが、クリックイベントと「リンク先に遷移する処理」は別のものですよね?
マークアップの機能として「リンク要素をクリックしたら指定URLに遷移する」とされていて、この処理はブラウザのエンジンが別に処理をしています。
もしも、カスタムイベントで「何らかの処理」をさせたいということであるのなら、それこそリスナの処理の中にその処理を記述しておくということになるのではないでしょうか?

補足ですが、カスタムイベントを使用する際には、initEvent()等でイベントオブジェクトの初期化をしておく必要があるようです。
https://msdn.microsoft.com/ja-jp/library/ff975459(v=vs.85).aspx


※ ご質問の意図がよくわからないので、思いつくままに記していますが、何かのご参考にでもなれば。

こんにちは

イベントに詳しいわけではないのと、意図がイマイチよくわからないのですが・・・

>試行錯誤の末に以下のコードに行きつきましたが、
>シンタックスエラーにはならないものの動作しません。
ご提示のスクリプは、後半部分でkeypressイベントを発生させています。
これに対して、前半ではpasteイベントのリスナを設定しているので、このリスナが呼ばれることはないですよね?
リスナのイベントタイプをkeypressにして設定しておけば、当然、呼び出されます。

>そもそもKeyboardEventでペースト操...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報