急いでいます！

htmlとCSSを使いSelect class で選んだlistの数字を掛け算したいです。

解決済

質問者：ffnic
質問日時：2021/01/25 22:47
回答数：3件

https://bebor.jp/?lp=cbdmax_logly_mint

こちらのサイトのたばこ計算ツールを自分でも作りたいのですがどのようにやれば良いか分からず困っております。

プログラミングが全くの初心者のため今勉強中なのですが、八方塞がりのため教えていただきたいです。
下記自分がやったところになります。（なおWPを使用しています）

結果を確認するとした時にクリックされましたという文字のところを下記の合計値を表示したいです。

(age)-(t_age)*tbox*365=合計値

何卒よろしくお願いいたします。

〜CSS〜

.tabacco_box_center {
padding: 1em 1.5em;
margin: auto;
background: linear-gradient(to bottom, #ffffff, #eeeeee);/*背景色*/
background: -webkit-linear-gradient(top, #fffff, #eeeeee);/*背景色*/
border: 1px solid #eeeeee;/*枠線*/
border-top: 4px solid #00008b;/*上の線*/
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
color:#000000;/*文字色*/
text-align: center;
}
.tabacco_box_center p {
margin: 0;
padding: 0;
}

.tabacco_list_a {
color:#dc143c;
font-weight: bold;
}
.tabacco_box_button{

}

.center {
text-align: center;
}

.tabacco_list{
margin: auto;
box-shadow: 10px 5px 5px red;
width:50%;
}

/** ボタン **/
.disp-box label {
display: inline-block;
color: #ffffff; /* ボタンの文字色 */
background-color: #000000; /* ボタンの背景色 */
font-weight: bold; /* 文字の太さ */
padding: 0.5em 1em; /* ボタン内側の余白 */
/*border-bottom: solid 4px #000000; ボタンの影部分 */
border-radius: 3px; /* 角丸 */
cursor: pointer; /* ボタンにカーソルを合わせた時に指アイコンを表示 */
}
/** ボタンクリック時のボタンを押し込む動作 **/
.disp-box label:active {
-webkit-transform: translateY(4px); /* Chrome、Safari用 */
-moz-transform: translateY(4px); /* Firefox用 */
-ms-transform: translateY(4px); /* IE用 */
transform: translateY(4px);
border-bottom: none;
}
/** チェックボックス **/
.disp-box input {
display: none; /* 非表示 */
}
/** 表示・非表示を切り替えるテキスト（「クリックされました！」の部分） **/
.disp-box .text {
color: #ff0000; /* 文字色 */
font-weight: bold; /* 文字の太さ */
font-size: 24px;
overflow: hidden;
opacity: 0; /* 文字を非表示 */
transition: 0.2s; /* 文字が表示・非表示される時のスピード */
}
/** チェックボックスにチェックが入った時の、テキストの処理 **/
.disp-box input:checked ~ .text {
height: auto;
opacity: 1; /* 文字を表示 */
}

〜html〜
<div class="tabacco_box_center">
<p class="tabaco_title b"><i class="fa fa-calculator"></i> たばこ計算ツール</p>

<form id="form" action="" method="post">
<p class="center"><span class="tabacco_list_a">STEP1</span>
現在の年齢は？</p>
<select class="tabacco_list" name="age" size="1">
<option value="">選択して下さい</option>
<option value="70">70歳</option>
<option value="71">71歳</option>
<option value="72">72歳</option>
<option value="73">73歳</option>
<option value="74">74歳</option>
<option value="75">75歳</option>
<option value="76">76歳</option>
<option value="77">77歳</option>
<option value="78">78歳</option>
<option value="79">79歳</option>
<option value="80">80歳</option>
</select>
<p class="center"><span class="tabacco_list_a">STEP2</span>
吸い始めた年齢は？</p>
<select class="tabacco_list" name="t_age" size="1">
<option value="">選択して下さい</option>
<option value="20">20歳</option>
<option value="21">21歳</option>
<option value="22">22歳</option>
<option value="23">23歳</option>
<option value="24">24歳</option>
<option value="25">25歳</option>
<option value="26">26歳</option>
<option value="27">27歳</option>
<option value="28">28歳</option>
<option value="29">29歳</option>
<option value="30">30歳</option>
<option value="31">31歳</option>

</select>
<p class="center"><span class="tabacco_list_a">STEP3</span>
1日に吸う量は？</p>
<select class="tabacco_list" name="tbox" size="1">
<option value="">選択して下さい</option>
<option value="250">半箱</option>
<option value="500">1箱</option>
<option value="1000">2箱</option>
</select>

あなたが今まで<br class="sp_image" />たばこに使ってきた金額は…
<div class="disp-box"><label for="disp-btn">結果を確認する</label>
<input id="disp-btn" type="checkbox" />
<p class="text">クリックされました！</p>
<span class="small_font60 gray no-top">※1箱500円と計算した場合</span>

</div>
</form></div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fairlady-h
回答日時：2021/01/26 15:39

以下のコードを.htmlファイルとして保存して、ブラウザ実行すると、私のGoogleChromeではご希望の挙動が確認できました。

WordPressは皆目わからず申し訳ありません

<html>
<head>
<style type="text/css">
.tabacco_box_center {
padding: 1em 1.5em;
margin: auto;
background: linear-gradient(to bottom, #ffffff, #eeeeee);/*背景色*/
background: -webkit-linear-gradient(top, #fffff, #eeeeee);/*背景色*/
border: 1px solid #eeeeee;/*枠線*/
border-top: 4px solid #00008b;/*上の線*/
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
color:#000000;/*文字色*/
text-align: center;
}
.tabacco_box_center p {
margin: 0;
padding: 0;
}

.tabacco_list_a {
color:#dc143c;
font-weight: bold;
}
.tabacco_box_button{

}

.center {
text-align: center;
}

.tabacco_list{
margin: auto;
box-shadow: 10px 5px 5px red;
width:50%;
}

/* ボタン **/
.disp-box label {
display: inline-block;
color: #ffffff; /* ボタンの文字色 */
background-color: #000000; /* ボタンの背景色 */
font-weight: bold; /* 文字の太さ */
padding: 0.5em 1em; /* ボタン内側の余白 */
/*border-bottom: solid 4px #000000; ボタンの影部分 */
border-radius: 3px; /* 角丸 */
cursor: pointer; /* ボタンにカーソルを合わせた時に指アイコンを表示 */
}
/** ボタンクリック時のボタンを押し込む動作 **/
.disp-box label:active {
-webkit-transform: translateY(4px); /* Chrome、Safari用 */
-moz-transform: translateY(4px); /* Firefox用 */
-ms-transform: translateY(4px); /* IE用 */
transform: translateY(4px);
border-bottom: none;
}
/** チェックボックス **/
.disp-box input {
display: none; /* 非表示 */
}
/** 表示・非表示を切り替えるテキスト（「クリックされました！」の部分） **/
.disp-box .text {
color: #ff0000; /* 文字色 */
font-weight: bold; /* 文字の太さ */
font-size: 24px;
overflow: hidden;
opacity: 0; /* 文字を非表示 */
transition: 0.2s; /* 文字が表示・非表示される時のスピード */
}
/** チェックボックスにチェックが入った時の、テキストの処理 **/
.disp-box input:checked ~ .text {
height: auto;
opacity: 1; /* 文字を表示 */
}
</style>

</head>
<body>

<div class="tabacco_box_center">
<p class="tabaco_title b"><i class="fa fa-calculator"></i> たばこ計算ツール</p>

<form id="form" action="" method="post">
<p class="center"><span class="tabacco_list_a">STEP1</span>
現在の年齢は？</p>
<select class="tabacco_list" name="age" size="1">
<option value="">選択して下さい</option>
<option value="70">70歳</option>
<option value="71">71歳</option>
<option value="72">72歳</option>
<option value="73">73歳</option>
<option value="74">74歳</option>
<option value="75">75歳</option>
<option value="76">76歳</option>
<option value="77">77歳</option>
<option value="78">78歳</option>
<option value="79">79歳</option>
<option value="80">80歳</option>
</select>
<p class="center"><span class="tabacco_list_a">STEP2</span>
吸い始めた年齢は？</p>
<select class="tabacco_list" name="t_age" size="1">
<option value="">選択して下さい</option>
<option value="20">20歳</option>
<option value="21">21歳</option>
<option value="22">22歳</option>
<option value="23">23歳</option>
<option value="24">24歳</option>
<option value="25">25歳</option>
<option value="26">26歳</option>
<option value="27">27歳</option>
<option value="28">28歳</option>
<option value="29">29歳</option>
<option value="30">30歳</option>
<option value="31">31歳</option>

</select>
<p class="center"><span class="tabacco_list_a">STEP3</span>
1日に吸う量は？</p>
<select class="tabacco_list" name="tbox" size="1">
<option value="">選択して下さい</option>
<option value="250">半箱</option>
<option value="500">1箱</option>
<option value="1000">2箱</option>
</select>

あなたが今まで<br class="sp_image" />たばこに使ってきた金額は…
<div class="disp-box"><label for="disp-btn" onclick="calc()">結果を確認する</label>
<input id="disp-btn" type="checkbox" />
<p class="text" id="sum">クリックされました！</p>

<span class="small_font60 gray no-top">※1箱500円と計算した場合</span>

</div>
</form>
</div>
<script language="javascript">
function calc()
{
var sel_age = document.getElementsByName("age")[0]
var sel_tage = document.getElementsByName("t_age")[0]
var sel_tbox = document.getElementsByName("tbox")[0]
var age = sel_age.options[sel_age.selectedIndex].value
var tage = sel_tage.options[sel_tage.selectedIndex].value
var tbox = sel_tbox.options[sel_tbox.selectedIndex].value
document.getElementsByClassName("text")[0].innerText = "合計 " + ((age - tage) * tbox *365) + "円"
}
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

有り難うございます。
同様の方法でやったところ私もchromeでは確認できました。
Wordpressで再度試してみます。
有り難うございます。

通報する

お礼日時：2021/01/26 19:40

No.2

回答者： fairlady-h
回答日時：2021/01/26 12:31

下のようにHTML側を修正・追加する作戦はいかがでしょうか？

①「<label for="disp-btn">結果を確認する</label>」を
「<label for="disp-btn" onclick="calc()">結果を確認する</label>」のようにonlickを追加し、
②以下のscriptタグを追加
「
<script language="javascript">
function calc()
{
　var sel_age = document.getElementsByName("age")[0]
　var sel_tage = document.getElementsByName("t_age")[0]
　var sel_tbox = document.getElementsByName("tbox")[0]
　var age = sel_age.options[sel_age.selectedIndex].value
　var tage = sel_tage.options[sel_tage.selectedIndex].value
　var tbox = sel_tbox.options[sel_tbox.selectedIndex].value
　document.getElementsByClassName("text")[0].innerText = "合計 " + ((age - tage) * tbox *365) + "円"
}
</script>
」

- 0
- 件

通報する

この回答へのお礼

ご回答有り難うございます。
設定したところ、クリックしましたの部分はそのままで、特に何もおこらないような感じでした。
クリックしましたの部分に計算した値を出すことはできないのでしょうか？
恐れ入りますがご確認いただけますと幸いです。

通報する

お礼日時：2021/01/26 15:23

No.1

回答者： Ogre7077
回答日時：2021/01/26 12:15

この雛形を元に、ページ内に処理を組み込んでみましょう

<form onsubmit="計算処理(this); return false">
<p><select name=a><option value=1>one</option><option value=2>two</option></select>
<p><input type=number name=b></p>
<p><button type=submit>ok</button></p>
<p class=text>表示領域</p>
</form>
<script>
function 計算処理(form) {
var a = parseInt(form.elements["a"].value);
var b = parseInt(form.elements["b"].value);
var r = a + b * 2;
var text = r.toLocaleString() + "円";
form.querySelector('.text').textContent = text;
}
</script>