ここから本文です

ほぼ完成しました。更に改善したいのでお願いします。 以下のコードを活かし、若...

アバター

ID非公開さん

2017/10/714:02:00

ほぼ完成しました。更に改善したいのでお願いします。
以下のコードを活かし、若干修正を加えたいです。
Q1)二つのselectの初期値をそれぞれ、"KiB"、"KB"にして表示したい。

Q2)formタグが無駄な気がするのでそれを省略すると、script部分はどうなれば同じ結果が得られるか。
Q3)Firefoxブラウザで表示した場合、演算結果に小数点未満がある場合(枠に収まってない場合?)、inputの枠が赤くなるのは仕様か。これをやめさせるか、他のブラウザでも同じ様に赤くしたい。(SafariやGoogleChromeではならないので統一したい)
Q4)この単位変換の計算結果、現実として合ってますか?

よろしくお願いします。
なお、kiki_mimiyさんに回答リクエストしていますが、
他の方からの回答を排他的に扱うつもりはありません。よろしくお願いします。

舵称より


http://mac-in.net/testCode/exponentiation.html

【実際のコード】
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<p><div style="display:inline-flex"><form name="souseBox" nowrap><input style="text-align: right; " name="souseNumeric" type="number" value="1024"></input></form></div>
<select name="souseUnit">
<option class="2" value="50">PiB (1,024 Byte)</option>
<option class="10" value="15">PB (1,000 Byte)</option>
<option class="2" value="40">TiB (1,024 Byte)</option>
<option class="10" value="12">TB (1,000 Byte)</option>
<option class="2" value="30">GiB (1,024 Byte)</option>
<option class="10" value="9">GB (1,000 Byte)</option>
<option class="2" value="20">MiB (1,024 Byte)</option>
<option class="10" value="6">MB (1,000 Byte)</option>
<option class="2" value="10">KiB (1,024 Byte)</option>
<option class="10" value="3">KB (1,000 Byte)</option>
<option class="2" value="0">Byte (8 bit)</option>
<option class="2" value="-3">bit (二進数の一桁)</option>
</select> <output id="souseFactor">?^?</output></p>

<p> ↓ ↓ ↓ ↓ ↓ ↓ ↓ <input type="submit" value="計算する" onclick="calCon()"></p>
<p><div style="display:inline-flex"><form name="objectBox" nowrap><input style="text-align: right; " name="objectNumeric" type="number" value="1000"></input></form></div>
<select name="objectUnit">
</select> <output id="objectFactor">?^?</output></p>

<script >
//選択メニューのオブジェクト・コレクション
var select = document.querySelectorAll('select');
//元になるオプション
var options = select[0].innerHTML;
//選択メニューの個数
var len = select.length;
for (var n=1; n<len; n++){
select[n].innerHTML = options;
}
</script>

<script >
function calCon(){
//結果を表示する要素
var result = document.querySelector('#result');
//選択メニューの要素1
var selectSouseUnit = document.querySelector('select[name="souseUnit"]');
//選択されたオプションのインデックス
var indexSouseUnit = selectSouseUnit.selectedIndex;
//選択メニューの要素2
var selectObjectUnit = document.querySelector('select[name="objectUnit"]');
//選択されたオプションのインデックス
var indexObjectUnit = selectObjectUnit.selectedIndex;
//換算値
var conversionByte = document.souseBox.souseNumeric.value * Math.pow(selectSouseUnit.options[indexSouseUnit].className, selectSouseUnit.options[indexSouseUnit].value) / Math.pow(selectObjectUnit.options[indexObjectUnit].className, selectObjectUnit.options[indexObjectUnit].value)
//戻り値1 (クラス属性値)
souseFactor.textContent = "=" + selectSouseUnit.options[indexSouseUnit].className + "^" + selectSouseUnit.options[indexSouseUnit].value + "×" + document.souseBox.souseNumeric.value;
//戻り値2 (クラス属性値)
objectFactor.textContent = "=" + selectObjectUnit.options[indexObjectUnit].className + "^" + selectObjectUnit.options[indexObjectUnit].value + "×" + conversionByte;
//戻り値3
document.objectBox.objectNumeric.value = conversionByte;
}
</script>

この質問は、kiki_mimiyさんに回答をリクエストしました。

閲覧数:
52
回答数:
1
お礼:
500枚

違反報告

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

プロフィール画像

カテゴリマスター

kiki_mimiyさん

リクエストマッチ

2017/10/715:30:06

このように疑問点を箇条書きにして頂くと、
とても解りやすくて良いですね。

お答えします!

Q1)二つのselectの初期値をそれぞれ、"KiB"、"KB"にして表示したい。

A1)onload後に選択メニューのオプションindexをセットします。

onload = function() {
//1番目の選択メニューのオプション設定
var index1 = 8;
select[0].options[index1].selected = true;

}
</script>

2つ目の選択メニューの場合なら、・・・
そうそう、これは私の仕事じゃないから、ご自身でやりましょう!

Q2)formタグが無駄な気がするのでそれを省略すると、script部分はどうなれば同じ結果が得られるか。

A2)formタグが無くても、各要素にアクセスできます。
そのアクセス方法がわかるのなら、結果は同じになります。

ただ、リセット、すなわち全データをクリアしたい場合などは
formタグがあったほうが超便利です。

※ formタグを使わずにselect部品などを使うと
「お行儀が悪いコーダー(プログラマー)」と揶揄されることもあります。

Q3)Firefoxブラウザで表示した場合、演算結果に小数点未満がある場合(枠に収まってない場合?)、
inputの枠が赤くなるのは仕様か。
これをやめさせるか、他のブラウザでも同じ様に赤くしたい。
(SafariやGoogleChromeではならないので統一したい)

A3)申し訳ないのですが、
Firefoxブラウザを使っていないため、お答えできません。

Q4)この単位変換の計算結果、現実として合ってますか?

A4)それを求められても回答者には無理です。

結果に関しては、作者ご本人が責任を持っていただくしかありません。
私に限らず、回答者はあくまでも、一助言者・一提案者ですので。

  • アバター

    質問者

    ID非公開さん

    2017/10/720:11:38

    何度もお付き合い頂きまして、本当に有り難う御座いました。
    <(_ _)>

    Q4については、責任や保証が欲しいのではなくて、
    間違いがあるのであれば、教えて頂きたいと思った次第です。
    「見つけられなかった」のであれば、スルーせぬその言い方でも充分です。有り難う御座います。


    これで「完成した」と言ってもいいかと思います。
    (先の問題点がまだ全てクリアできていないが)
    http://mac-in.net/testCode/exponentiationBeta.html
    これを私のブログとサイトで使うつもりなのですが、
    『アトリエ・トリガ』(「舵称」はこちらのブログでの当座のHN)
    http://scrappocket.mac-in.net/
    『shirukozo』のプロフィール
    http://shirukozo.mac-in.net/profile.html
    「スペシャルサンクス」として
    「星野亜加里さん(ID:kiki_mimiyさん)」というお名前と、知恵袋のプロフィールページへのリンクを併記させて頂きたいのですが、
    ご迷惑でしょうか?

    舵称より

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

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

  • 取り消す
  • キャンセル

アバター

質問した人からのコメント

2017/10/8 10:35:32

とても参考になるアドバイスを何度も頂きました。
有り難う御座いました!

予告通り、試運転として公開しました。
http://scrappocket.mac-in.net/?eid=61
皆さん、ご利用下さい。<(_ _)>

問題あれば、ブログにコメントに下さい。
ご意見等も歓迎致します!

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

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

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

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

閉じる

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