【サブルーチン化できない】functionの使い方が間違っているのでしょうか

前提・実現したいこと

初歩的な内容で申し訳ありません。

商品を陳列して賞味期限をチェック・並べ替えをするプログラムを作成していて、
なんとか見様見真似で１つの商品オブジェクトが完成しました。

ですが、これをサブルーチン化して何個も同じものを作る方法がわかりません。

これをサブルーチン化し、同じ商品を何個も並べたいです。
できれば違う商品も、画像を変えるだけで簡単にたくさん並べたいと思っています。

該当のソースコード

Java html

試したこと

の前に　function Yasai(){ の後に　｝

を入力しましたが、実行すると、上記文が文字列となって画面に表示されてしまいました。

作成した命令文

<html> <head> <title>オペレーション</title> <body> <img src="冷蔵庫.png" alt="冷蔵庫">   <script> var obj; var offsetX; var offsetY; function doInit() { if (document.layers /* Netscape Communicator 4.* */) { objlist = document.layers; } else if (document.all /* Internet Explorer 5.* */) { objlist = document.all.tags("SPAN"); } else if (document.getElementsByTagName /* Netscape 6 */) { objlist = document.getElementsByTagName("SPAN"); } else { return; } for (i = 0; i < objlist.length; i++) { if (document.layers) { objlist[i].captureEvents(Event.MOUSEDOWN); } objlist[i].onmousedown = onMouseDown; } if (document.layers) { document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); } document.onmousemove = onMouseMove; document.onmouseup = onMouseUp; } function onMouseDown(e) { obj = this; if (document.layers) { offsetX = e.layerX; offsetY = e.layerY; } else if (document.all) { offsetX = event.offsetX + 2; offsetY = event.offsetY + 2; } else if (obj.getElementsByTagName) { offsetX = e.pageX - parseInt(obj.style.left); offsetY = e.pageY - parseInt(obj.style.top); } return false; } function onMouseMove(e) { if (!obj) { return true; } if (document.layers) { obj.pageX = e.pageX - offsetX; obj.pageY = e.pageY - offsetY; } else if (document.all) { obj.style.left = event.clientX - offsetX + document.body.scrollLeft; obj.style.top = event.clientY - offsetY + document.body.scrollTop; } else if (obj.getElementsByTagName) { obj.style.left = e.pageX - offsetX; obj.style.top = e.pageY - offsetY; } return false; } function onMouseUp(e) { obj = null; } </script> </head> <body onload="doInit()"> <body style="font-size:11px;"> <span style="position:absolute; top:100px; left:100px; width:80px;"> <div style="position: relative; display:inline-block;"> <img src="やさい.png" width=135 height=150 alt="やさい"> <div style="position: absolute; top: 17; left: 33; max-width: 100%; max-height: 100%; padding: 5px; text-align: left;"> <span style="transform: rotate(18deg); display: inline-block;"> <p>

行動規範の内容に同意します

回答2件

ですが、これをサブルーチン化して何個も同じものを作る方法がわかりません。
これをサブルーチン化し、同じ商品を何個も並べたいです。

とりあえず以下のようなコードを追加することで商品を何個も並べられますが、それをサブルーチン化とは呼びません。

html
1<span style="position:absolute; top:100px; left:300px;">
2  <img src="アイテム2.png" width=135 height=150 alt="アイテム2"> 
3</span>
4
5<span style="position:absolute; top:100px; left:500px;">
6  <img src="アイテム3.png" width=135 height=150 alt="アイテム3"> 
7</span>

質問に書かれている「試したこと」があまりに的外れなことから、あなたはコードの意味が理解できていないようです。
またhtmlの構造も破綻していおり、おそらく参考にしたサイトが古いのでしょうがjavascriptの書き方が20年前の水準のものです。

試行錯誤して目的のものをなんとか組もうとする姿勢は悪くありませんが、それを行う以前に最低限htmlやjavascriptについて基本的な学習を行う必要があると思います。

投稿2020/03/24 15:27

ku__ra__ge

総合スコア4524

【サブルーチン化できない】functionの使い方が間違っているのでしょうか

「急がば廻れ」という回答しかできません。

見様見真似

紙の「原稿用紙」にも書き方があるように、ウェブブラウザに表示する「ページ」にもHTMLというルールがあります。
原稿用紙そのものですら、真っ白な紙に、一定の規則で線が引かれ、枠組みが設けて、ルールに従いやすい様式（フォーマット）になっています。
HTMLは常に真っ白なテキストファイルに<html>要素や <head> 要素、 <body> 要素といった枠組みを設け、HTMLのルールに従った記述をしなければなりません。

本当に何も知らない所からの挑戦でしたら、せめて、とほほのWWW入門の「基礎編」ような、10年前は十分に通用していた（現在では「若干の歴史は感じるものの、使えなくはない」）内容は習得しておくべきかと思います。

このようなマークアップをテンプレートに表示したい内容を研究してみてください。

html
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>オペレーション</title>
6</head>
7<body>
8  <!-- 画面に表示したい内容をマークアップ -->
9  <script>
10  /* javascript */
11  </script>
12</body>
13</html>