質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 481
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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

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

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

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

該当のソースコード

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>

<!-- 日付 -->
<span id="view_time"></span>

<script type="text/javascript">
var x = Math.floor(Math.random() * 9);
var y = Math.floor(Math.random() * 2);
var z = Math.floor(Math.random() * 9);

document.getElementById("view_time").innerHTML = getNow();

function getNow() {
var now = new Date();
var year = now.getFullYear() +y -2000;
var mon =  now.getMonth()    +x ; 
var day = now.getDate()       ;

if (now.getMonth() > 12 ) { now.getMonth() -12}
if (now.getDate()  > 28 ) { now.getDate()  -28}
//出力用
var s = year + "." + mon + "." + day; 
return s;
}
</script>
</p>
</span>
</div></div>
</body>
</span>
</body>

</body>
</html>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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

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

<span style="position:absolute; top:100px; left:300px;">
  <img src="アイテム2.png" width=135 height=150 alt="アイテム2"> 
</span>

<span style="position:absolute; top:100px; left:500px;">
  <img src="アイテム3.png" width=135 height=150 alt="アイテム3"> 
</span>

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

見様見真似

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

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


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

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>オペレーション</title>
</head>
<body>
  <!-- 画面に表示したい内容をマークアップ -->
  <script>
  /* javascript */
  </script>
</body>
</html>


※原稿用紙の書き方同様、しっかりと学べば、HTMLは誰にでも書けるものですので、まずは基礎学習から始めてみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る