アプリ版:「スタンプのみでお礼する」機能のリリースについて

JavaScriptをはじめて扱う初心者です。
このサンプルのテキストエリア(複数行)をプルダウンで内容を変更できるようにしたいと思っています
http://www3.plala.or.jp/moananja/iroiro/Material …

プルダウンで項目Aを選択すると
 AAA
 AAA
 AAA
項目Bを選択すると
 BBB
 BBB
とテキストエリアに代入されるような機能を付けたいのですが、どのように書いたらよいでしょうか?
ネットで検索して、テキストエリアに代入する方法は下記で見つけたのですが、上のサンプルスクリプトと繋げ方が分かりませんでした
ご教授よろしくお願いいたします
http://q.hatena.ne.jp/1190481115

A 回答 (5件)

合計と消費税を削除してみました。

お試しください。

<html>
<head>
<script language="javascript">
var oMenu={
"menuA":[["sozaiA-1",2],["sozaiA-2",1],["sozaiA-3",2],["sozaiA-4",3],["sozaiA-5",4]],
"menuB":[["sozaiB-1",1],["sozaiB-2",2],["sozaiB-3",2],["sozaiB-4",4],["sozaiB-5",2],["sozaiB-6",3],["sozaiB-7",1]],
"menuC":[["sozaiC-1",5],["sozaiC-2",2],["sozaiC-3",1]]
};
var oItems={"title":"材料名","require":"1人前あたりの材料数","amount":"人数","subtotal":"合計材料数"};
window.onload=function(){
//選択項目の作成
var oSelCategory=getObj("selCategory");
for(strCategory in oMenu)
oSelCategory.options[oSelCategory.options.length]=new Option(strCategory,strCategory);
//計算表の初期化
makeTable("menuA");
}
var getObj=function(strID){return document.getElementById(strID)};
var makeElem=function(strName){return document.createElement(strName)};
//計算表の作成
var makeTable=function(strListName){
var oTBL=getObj("tblCalc");
while(oTBL.hasChildNodes())
oTBL.removeChild(oTBL.lastChild);
var oTBODY=makeElem("TBODY");
oTBL.appendChild(oTBODY);

//表のヘッダーを追加
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
for(strKey in oItems){
var oTH=makeElem("TH");
oTH.appendChild(document.createTextNode(oItems[strKey]));
oTR.appendChild(oTH);
}
//表のボディを追加
for(var i=0;i<oMenu[strListName].length;i++){
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
//項目名、単価、個数、小計
for(strKey in oItems){
var oTD=makeElem("TD");
oTD.align="center";
oTD.style.backgroundColor="#dddddd";
oTR.appendChild(oTD);
if(strKey=="title")
oTD.appendChild(document.createTextNode(oMenu[strListName][i][0]));
else{
var oINPUT=makeElem("INPUT");
oINPUT.type="text";
oINPUT.id=strKey+"_"+i;
oINPUT.style.width="100%";
oINPUT.style.textAlign="right";
if(strKey=="amount")
{
oINPUT.onkeyup=function(){calcTotal()};
oINPUT.style.imeMode = "disabled";
}
else
oINPUT.readOnly=true;
if(strKey=="require")
oINPUT.value=oMenu[strListName][i][1];
oTD.appendChild(oINPUT);
}
}
}

}
//合計値の計算
var calcTotal = function(){
var strCurListName=getObj("selCategory").value;
//小計を計算
for(var i=0;i<oMenu[strCurListName].length;i++){
var oRequire=getObj("require_"+i);
var oAmount=getObj("amount_"+i);
var oSubTotal=getObj("subtotal_"+i);
if( oRequire && oAmount && oSubTotal ){
if(oRequire.value !="" && !isNaN(oRequire.value) && oAmount.value !="" && !isNaN(oAmount.value))
oSubTotal.value=parseFloat(oRequire.value)*parseFloat(oAmount.value);
else
oSubTotal.value="";
}
}
}

</script>
</head>
<body>
<SELECT ID="selCategory" onchange="makeTable(this.value)"></SELECT><BR/>
<TABLE ID="tblCalc" border="1" cellpadding="2" cellspacing="0"></TABLE>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます!
これならやりたかった事ができそうです^^
いろいろとネットでサンプルなどを見て、なかなか思うようなものが見つからなかったので、とても嬉しいです!
自分でも加工できるように勉強しながら実用してみたいと思います!
お忙しいところありがとうございました^^

お礼日時:2011/08/25 23:27

一括入力を忘れていました。



<html>
<head>
<script language="javascript">
var oMenu={
"menuA":[["sozaiA-1",2],["sozaiA-2",1],["sozaiA-3",2],["sozaiA-4",3],["sozaiA-5",4]],
"menuB":[["sozaiB-1",1],["sozaiB-2",2],["sozaiB-3",2],["sozaiB-4",4],["sozaiB-5",2],["sozaiB-6",3],["sozaiB-7",1]],
"menuC":[["sozaiC-1",5],["sozaiC-2",2],["sozaiC-3",1]]
};
var oItems={"title":"材料名","require":"1人前あたりの材料数","amount":"人前","subtotal":"合計材料数"};
window.onload=function(){
//選択項目の作成
var oSelCategory=getObj("selCategory");
for(strCategory in oMenu)
oSelCategory.options[oSelCategory.options.length]=new Option(strCategory,strCategory);
//計算表の初期化
makeTable("menuA");
}
var getObj=function(strID){return document.getElementById(strID)};
var makeElem=function(strName){return document.createElement(strName)};
//計算表の作成
var makeTable=function(strListName){
var oTBL=getObj("tblCalc");
while(oTBL.hasChildNodes())
oTBL.removeChild(oTBL.lastChild);
var oTBODY=makeElem("TBODY");
oTBL.appendChild(oTBODY);

//表のヘッダーを追加
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
for(strKey in oItems){
var oTH=makeElem("TH");
if(strKey=="amount"){
var oINPUT=makeElem("INPUT");
oINPUT.type="text";
oINPUT.id="amount";
oINPUT.style.width="30px";
oINPUT.style.textAlign="center";
oINPUT.style.imeMode="disabled";
oINPUT.onkeyup=function(){
for(var i=0;i<oMenu[strListName].length;i++){
var oAmount=document.getElementById("amount_"+i);
if(this.value !="" && !isNaN(this.value))
oAmount.value=this.value;
calcTotal();
}
};
oTH.appendChild(oINPUT);
}
oTH.appendChild(document.createTextNode(oItems[strKey]));
oTR.appendChild(oTH);
}
//表のボディを追加
for(var i=0;i<oMenu[strListName].length;i++){
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
//項目名、単価、個数、小計
for(strKey in oItems){
var oTD=makeElem("TD");
oTD.align="center";
oTD.style.backgroundColor="#dddddd";
oTR.appendChild(oTD);
if(strKey=="title")
oTD.appendChild(document.createTextNode(oMenu[strListName][i][0]));
else{
var oINPUT=makeElem("INPUT");
oINPUT.type="text";
oINPUT.id=strKey+"_"+i;
oINPUT.style.width="100%";
oINPUT.style.textAlign="right";
if(strKey=="amount")
{
oINPUT.onkeyup=function(){calcTotal()};
oINPUT.style.imeMode="disabled";
}
else
oINPUT.readOnly=true;
if(strKey=="require")
oINPUT.value=oMenu[strListName][i][1];
oTD.appendChild(oINPUT);
}
}
}

}
//合計値の計算
var calcTotal = function(){
var strCurListName=getObj("selCategory").value;
//小計を計算
for(var i=0;i<oMenu[strCurListName].length;i++){
var oRequire=getObj("require_"+i);
var oAmount=getObj("amount_"+i);
var oSubTotal=getObj("subtotal_"+i);
if( oRequire && oAmount && oSubTotal ){
if(oRequire.value !="" && !isNaN(oRequire.value) && oAmount.value !="" && !isNaN(oAmount.value))
oSubTotal.value=parseFloat(oRequire.value)*parseFloat(oAmount.value);
else
oSubTotal.value="";
}
}
}

</script>
</head>
<body>
<SELECT ID="selCategory" onchange="makeTable(this.value)"></SELECT><BR/>
<TABLE ID="tblCalc" border="1" cellpadding="2" cellspacing="0"></TABLE>
</body>
</html>
    • good
    • 0

ぜんかくくうはくは、すべてはんかくにしてね


ふぁいあーふぉっくすとか、くろむとか、あたらしめのものなら、うごくとおもう。

りすとこうぞうは、もっとこまかくしろ!とかは、つっこまないでね
<!DOCTYPE html>
<html lang="ja">
 <meta charset="utf-8" />
 <title>朝食</title>
 <style>
table, td {
 border :1px gray inset;
 background : #ffe;
}
th {
 border :1px gray outset;
 background : #eef;
}
ul {
 margin :1em 0;
}
td:nth-of-type(2), td:nth-of-type(3) {
 text-align: right;
}
form {
 display:none;
}
 </style>
<script>
document.write ("<style>#KONDATE{display:none} form{display:block}<" + "/style>");
</script>

<body>
<h1>朝食の献立</h1>
<ul id="KONDATE">
 <li>
  <ul>
   <li>献立を選んでね
  </ul>
 
 <li>
  <ul>
   <li>生卵かけご飯+α
   <li>ごはん, 1, 杯
   <li>生卵, 1, 個
   <li>醤油, 10, 滴
   <li>リポビタンD, 1, 本
  </ul>

 <li>
  <ul>
   <li>卵豆腐
   <li>どん兵衛の残り汁, 1, 杯
   <li>生卵, 2, 個
   <li>ねぎのみじん切り, 少々,
   <li>よく混ぜて電子レンジで,5,分
  </ul>
</ul>

<form action="#">
 <table id="LIST">
  <thead>
   <tr>
    <th colspan="4">
     めにゅ~
     <select name="@MENU" onchange="calc (event)">
      <option selected>えらんでね
     </select>
     <select name="@NINZU" onchange="calc (event)">
      <option value="1">1
      <option value="2">2
      <option value="3">3
     </select>人前
    
   <tr><th>材料名<th>材料数<th>合計材料数<th>単位
  </thead>
  <tbody>
   <tr><td colspan="4">詳細が表示されます
  </tbody>
 </table>
</form>



<script>
var D = document;
var A = Array.prototype;

var csv2Tbody =
 (function () {
  function insertRow (fields) { fields.forEach (insertCell, this.insertRow (-1));}
  function insertCell (field) { this.insertCell (-1).textContent = field; }
 
  return function (csv) {
   var tbody = D.createElement ('tbody');
   tbody.insertRow (-1);
   csv.forEach (insertRow, tbody);
   tbody.deleteRow (0);
   return tbody;
  };
 })();


function replaceOptions (select, aryText, aryValue, defValue) {
 if (2 > arguments.length)
  return false;

 var v = D.parentWindow || D.defaultView;
 var o = select.options;
 var i, I;
 var s, sw;
 
 o.length = 0;
 if ('undefined' === typeof aryValue)
  aryValue = aryText;
 
 for (i = 0, I = aryText.length; i < I; i++) {
  s = String (aryValue[i]);
  sw = (s === String (defValue));
  o[i] = new v.Option (String (aryText[i]), s, sw, sw);
 }
}


function calc () {
 var t = D.querySelector ('#LIST > tbody');
 var n = +D.querySelector ('select[name="@MENU"]').value + 1;
 var m = +D.querySelector ('select[name="@NINZU"]').value;
 var c = A.map.call (
      A.slice.call (
       D.querySelectorAll ('#KONDATE > li:nth-of-type(' + n + ') > ul > li'), 1),
        function (li) {
         return li.textContent.trim ().split (/[\|\/,]/g);});
 c = c.map (function (r) { return [r[0], r[1] || 1, r[1] * this || r[1], r[2] || '-']; }, m);
 t.parentNode.replaceChild (csv2Tbody(c), t);
}


//___________
var o = A.reduce.call (
  D.querySelectorAll ('#KONDATE > li > ul > li:first-of-type'),
   function (r, li, i) {
    return [r[0].concat (li.textContent.trim()), r[1].concat (i)]}, [[],[]]);

replaceOptions (D.querySelector ('select[name="@MENU"]'),o[0], o[1]);
</script>
    • good
    • 0
この回答へのお礼

ありがとうございます^^
シンプルで自分でも何とか加工できるスクリプトだったので、アクセス解析で閲覧者の利用ブラウザ状況を見て検討してみようと思います

お礼日時:2011/08/25 23:25

単価デフォルト入力版です。



<html>
<head>
<script language="javascript">
var oCategory={"listA":[["A1",10],["A2",20],["A3",30],["A4",40],["A5",50]],"listB":[["B1",60],["B2",70],["B3",80],["B4",90],["B5",100],["B6",110],["B7",120]],"listC":[["C1",130],["C2",140],["C3",150]]};
var oHeader=["項目","単価","個数","小計"];
var nTextWidth=100;
var nTaxRate=1.05;
window.onload=function(){
//選択項目の作成
var oSelCategory=getObj("selCategory");
for(strCategory in oCategory)
oSelCategory.options[oSelCategory.options.length]=new Option(strCategory,strCategory);
//計算表の初期化
makeTable("listA");
}
var getObj=function(strID){return document.getElementById(strID)};
var makeElem=function(strName){return document.createElement(strName)};
//計算表の作成
var makeTable=function(strListName){
var oTBL=getObj("tblCalc");
while(oTBL.hasChildNodes())
oTBL.removeChild(oTBL.lastChild);
var oTBODY=makeElem("TBODY");
oTBL.appendChild(oTBODY);

//表のヘッダーを追加
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
for(var i=0;i<oHeader.length;i++){
var oTH=makeElem("TH");
oTH.appendChild(document.createTextNode(oHeader[i]));
oTR.appendChild(oTH);
}
//表のボディを追加
var oItems=["title","price","amount","subtotal"];
for(var i=0;i<oCategory[strListName].length;i++){
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
//項目名、単価、個数、小計
for(var j=0;j<oItems.length;j++){
var oTD=makeElem("TD");
oTD.align="center";
oTD.style.backgroundColor="#dddddd";
oTR.appendChild(oTD);
if(oItems[j]=="title")
oTD.appendChild(document.createTextNode(oCategory[strListName][i][0]));
else{
var oINPUT=makeElem("INPUT");
oINPUT.type="text";
oINPUT.id=oItems[j]+"_"+i;
oINPUT.style.width=nTextWidth;
oINPUT.style.textAlign="right";
if(oItems[j]=="amount")
oINPUT.onkeyup=function(){calcTotal()};
else
oINPUT.readOnly=true;
if(oItems[j]=="price")
oINPUT.value=oCategory[strListName][i][1];
oTD.appendChild(oINPUT);
}
}
}
//表のフッターを追加
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
//合計タイトル、余白、合計値
for(var j=0;j<oItems.length;j++){
var oTD=makeElem("TD");
oTD.align="center";
oTD.style.backgroundColor="#dddddd";
oTR.appendChild(oTD);
if(oItems[j]=="title")
oTD.appendChild(document.createTextNode("合計"));
else if(oItems[j]!="subtotal")
oTD.appendChild(document.createTextNode(" "));
else{
var oINPUT=makeElem("INPUT");
oINPUT.type="text";
oINPUT.id="total";
oINPUT.style.width=nTextWidth;
oINPUT.style.textAlign="right";
oINPUT.readOnly=true;
oTD.appendChild(oINPUT);
}
}
}
//合計値の計算
var calcTotal = function(){
var strCurListName=getObj("selCategory").value;
var blnAddTaxRate=getObj("chkTaxRate").checked;
//小計を計算
for(var i=0;i<oCategory[strCurListName].length;i++){
var oPrice=getObj("price_"+i);
var oAmount=getObj("amount_"+i);
var oSubTotal=getObj("subtotal_"+i);
if( oPrice && oAmount && oSubTotal ){
if(oPrice.value !="" && !isNaN(oPrice.value) && oAmount.value !="" && !isNaN(oAmount.value)){
var nSubTatal=parseFloat(oPrice.value)*parseFloat(oAmount.value)*(blnAddTaxRate?nTaxRate:1);
var nDecimalMode=1;//小数点以下の扱い(1:繰り下げ、2:繰り上げ、3:四捨五入)
oSubTotal.value=(nDecimalMode==1?Math.floor(nSubTatal):(nDecimalMode==2?Math.ceil(nSubTatal):Math.round(nSubTatal)));
}
else
oSubTotal.value="";
}
}
//合計を計算
var nTotalAmount=0;
var oTatal=getObj("total");
for(var i=0;i<oCategory[strCurListName].length;i++){
var oSubTotal=getObj("subtotal_"+i);
if(oSubTotal.value !="")
nTotalAmount+=parseFloat(oSubTotal.value);
}
oTatal.value=(nTotalAmount==0?"":nTotalAmount);
}

</script>
</head>
<body>
<SELECT ID="selCategory" onchange="makeTable(this.value)"></SELECT><BR/>
<TABLE ID="tblCalc" border="1" cellpadding="2" cellspacing="0"></TABLE>
<INPUT TYPE="checkbox" ID="chkTaxRate" name="chkTaxRate" onclick="calcTotal()"/><LABEL for="chkTaxRate">消費税</LABEL>
</body>
</html>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます!
サンプルよりもシンプルで良いものが作れそうです

現在までに作っていた計算表はこれで作ることができたのですが…
このスクリプトを拡張して、別に材料表のようなものを作ろうと思っています。

具体的には
 プルダウンで料理を選択
 「項目欄」と「単価欄」に材料名と材料数を自動挿入
 「個数欄」に○人前と手入力(できれば1箇所だけの入力で済むようにしたい)
 小計欄にそれぞれの合計材料数(1人前の材料数×4人前)が自動計算される
といった感じです

合計・消費税などを省いた小計のみにしようとデフォルト版の「合計値の計算」「表のフッター」の記述を削除したところ、表が生成されなくなってしまいました。

お手すきの時で構いませんので、再度ご教授頂ければ幸いです><

お礼日時:2011/08/24 21:55

テキストエリアにこだわらないのであれば・・・



<html>
<head>
<script language="javascript">
var oCategory={"listA":["A1","A2","A3","A4","A5"],"listB":["B1","B2","B3","B4","B5","B6","B7"],"listC":["C1","C2","C3"]};
var oHeader=["項目","単価","個数","小計"];
var nTextWidth=100;
var nTaxRate=1.05;
window.onload=function(){
//選択項目の作成
var oSelCategory=getObj("selCategory");
for(strCategory in oCategory)
oSelCategory.options[oSelCategory.options.length]=new Option(strCategory,strCategory);
//計算表の初期化
makeTable("listA");
}
var getObj=function(strID){return document.getElementById(strID)};
var makeElem=function(strName){return document.createElement(strName)};
//計算表の作成
var makeTable=function(strListName){
var oTBL=getObj("tblCalc");
while(oTBL.hasChildNodes())
oTBL.removeChild(oTBL.lastChild);
var oTBODY=makeElem("TBODY");
oTBL.appendChild(oTBODY);

//表のヘッダーを追加
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
for(var i=0;i<oHeader.length;i++){
var oTH=makeElem("TH");
oTH.appendChild(document.createTextNode(oHeader[i]));
oTR.appendChild(oTH);
}
//表のボディを追加
var oItems=["title","price","amount","subtotal"];
for(var i=0;i<oCategory[strListName].length;i++){
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
//項目名、単価、個数、小計
for(var j=0;j<oItems.length;j++){
var oTD=makeElem("TD");
oTD.align="center";
oTD.style.backgroundColor="#dddddd";
oTR.appendChild(oTD);
if(oItems[j]=="title")
oTD.appendChild(document.createTextNode(oCategory[strListName][i]));
else{
var oINPUT=makeElem("INPUT");
oINPUT.type="text";
oINPUT.id=oItems[j]+"_"+i;
oINPUT.style.width=nTextWidth;
oINPUT.style.textAlign="right";
if(oItems[j]=="subtotal")
oINPUT.readOnly=true;
else
oINPUT.onkeyup=function(){calcTotal()};
oTD.appendChild(oINPUT);
}
}
}
//表のフッターを追加
var oTR=makeElem("TR");
oTBODY.appendChild(oTR);
//合計タイトル、余白、合計値
for(var j=0;j<oItems.length;j++){
var oTD=makeElem("TD");
oTD.align="center";
oTD.style.backgroundColor="#dddddd";
oTR.appendChild(oTD);
if(oItems[j]=="title")
oTD.appendChild(document.createTextNode("合計"));
else if(oItems[j]!="subtotal")
oTD.appendChild(document.createTextNode(" "));
else{
var oINPUT=makeElem("INPUT");
oINPUT.type="text";
oINPUT.id="total";
oINPUT.style.width=nTextWidth;
oINPUT.style.textAlign="right";
oINPUT.readOnly=true;
oTD.appendChild(oINPUT);
}
}
}
//合計値の計算
var calcTotal = function(){
var strCurListName=getObj("selCategory").value;
var blnAddTaxRate=getObj("chkTaxRate").checked;
//小計を計算
for(var i=0;i<oCategory[strCurListName].length;i++){
var oPrice=getObj("price_"+i);
var oAmount=getObj("amount_"+i);
var oSubTotal=getObj("subtotal_"+i);
if( oPrice && oAmount && oSubTotal ){
if(oPrice.value !="" && !isNaN(oPrice.value) && oAmount.value !="" && !isNaN(oAmount.value)){
var nSubTatal=parseFloat(oPrice.value)*parseFloat(oAmount.value)*(blnAddTaxRate?nTaxRate:1);
var nDecimalMode=1;//小数点以下の扱い(1:繰り下げ、2:繰り上げ、3:四捨五入)
oSubTotal.value=(nDecimalMode==1?Math.floor(nSubTatal):(nDecimalMode==2?Math.ceil(nSubTatal):Math.round(nSubTatal)));
}
else
oSubTotal.value="";
}
}
//合計を計算
var nTotalAmount=0;
var oTatal=getObj("total");
for(var i=0;i<oCategory[strCurListName].length;i++){
var oSubTotal=getObj("subtotal_"+i);
if(oSubTotal.value !="")
nTotalAmount+=parseFloat(oSubTotal.value);
}
oTatal.value=(nTotalAmount==0?"":nTotalAmount);
}

</script>
</head>
<body>
<SELECT ID="selCategory" onchange="makeTable(this.value)"></SELECT><BR/>
<TABLE ID="tblCalc" border="1" cellpadding="2" cellspacing="0"></TABLE>
<INPUT TYPE="checkbox" ID="chkTaxRate" name="chkTaxRate" onclick="calcTotal()"/><LABEL for="chkTaxRate">消費税</LABEL>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます^^
デフォルト入力版が理想に近かったです^^

お礼日時:2011/08/25 08:21

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