jQuery 変数の扱いについて

btn要素をクリックしないで、resultをクリックした時に'Choose One!'というアラートを表示したいです。
$('#result').on('click', function(){
if ($('#text1').val() === '' || $('#text2').val() === '' || $selected === ''){
alert('Choose One!');
の$selected === ''で試してみたのですが、Choose One!は表示されずに普通に計算されてしまいました。以下にCodeを記しますので原因を教えて頂ければ幸いです。

PHP
1<?php
2
3require_once(__DIR__ . '/config.php');
4
5$text1 ='';
6$text2='';
7
8$result='';
9
10if ($_SERVER['REQUEST_METHOD'] === 'POST'){
11  $text1 = $_POST['text1'];
12  $text2 = $_POST['text2'];
13  $selected = $_POST['answer'];
14
15  switch ($selected){
16    case "plus";
17      $result = $text1 + $text2;
18      break;
19    case "mainasu";
20        $result = $text1 - $text2;
21        break;
22    case "kakeru";
23        $result = $text1 * $text2;
24        break;
25    case "waru";
26          $result = $text1 / $text2;
27          break;
28
29  }
30
31}
32
33 ?>
34
35<!DOCTYPE html>
36<html lang = "ja">
37<head>
38  <meta charset = "utf-8">
39  <title>calculator</title>
40  <link rel="stylesheet" href="styles.css">
41</head>
42<body>
43<div id ="container">
44  <h1>計算</h1>
45  <form action="" method="POST">
46    <div id="container-1">
47      <input type="text" id="text1" name="text1" placeholder="数値1" value="<?= h($text1); ?>"  onKeyup="this.value=this.value.replace(/[^0-9]+/,'')">
48      <ul>
49        <li data-id="plus" class="btn">+</li>
50        <li data-id="mainasu" class="btn">−</li>
51        <li data-id="kakeru" class="btn">×</li>
52        <li data-id="waru" class="btn">÷</li>
53        <input type="hidden" id="answer" name="answer" value="">
54      </ul>
55      <input type="text"  id="text2" name="text2" placeholder="数値2" value="<?= h($text2); ?>" onKeyup="this.value=this.value.replace(/[^0-9]+/,'')">
56    </div>
57  <div id="result">result</div>
58  <div id="cal_result"><?= h($result); ?></div>
59</form>
60</div>
61<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
62<script>
63$(function(){
64  'use strict';
65  var $selected;
66  $('.btn').on('click', function(){
67    $('.btn').removeClass('selected');
68    $(this).addClass('selected');
69
70    $selected = $('#answer').val($(this).data('id'));
71    console.log($selected);
72
73    });
74  $('#result').on('click', function(){
75    if ($('#text1').val() === '' || $('#text2').val() === ''  || $selected === ''){
76      alert('Choose One!');
77    } else {
78      $('form').submit();
79    }
80  });
81});
82</script>
83</body>
84</html>

php
1<?php
2
3ini_set('display_errors', 1);
4require_once(__DIR__ . '/functions.php');

css
1body {
2  font-size: 16px;
3  font-family: Arial, sans-serif;
4}
5
6#container {
7  text-align: center;
8  width: 500px;
9  margin: 15px auto;
10}
11h1{
12  font-size: 20px;
13  line-height:50px;
14  padding: 10px;
15}
16h1 ,ul > li {
17  border: 1px solid #ddd;
18  border-radius: 5px;
19}
20#container-1{
21  display: flex;
22}
23ul{
24margin:auto;
25  list-style: none;
26  padding: 0;
27}
28li{
29  width:20px;
30  margin: auto;
31  cursor: pointer;
32}
33#text1{
34  height: 10px;
35  margin-top: 25px;
36}
37#text2{
38  height: 10px;
39  margin-top: 25px;
40}
41#result{
42  margin-top: 0px;
43  float:right;
44  cursor: pointer;
45  box-shadow: 0 4px 0 #0088cc;
46  border-radius: 5px;
47  background: #00aaff;
48  width: 100px;
49  color: #fff;
50}
51#cal_result{
52    float:right;
53    margin-top: 30px;
54}
55.btn{
56    opacity: 0.5;
57    font-weight: bold;
58}
59.btn + .btn{
60  margin-top: 5px;
61}
62.selected{
63  opacity: 1.0;
64}
65

m.ts10806

2019/03/11 00:49

結局私が前回の回答やコメントで書いた対応は「やらない」ということでしょうか。 https://teratail.com/questions/178578 何も参考にしない対応しないのなら解決済みにしないでください。

GoGobuchiking

2019/03/11 03:24

やらないとは申し上げておりません。今後検討しますと申し上げました。何を求めているのか存じ上げませんがわざわざ別のところで度を越えたアドバイスをしないでください。

m.ts10806

2019/03/11 03:26

いえ、「回答が無駄になったな」と大変残念な気持ちになっただけです。サーバーサイドでのチェックが如何に大事か、というのをご理解いただいたと思っていたので、優先的に対応するものと思っておりました。まあ、仕方ないですね。

GoGobuchiking

2019/03/11 03:34

とてもありがたいアドバイスでした。感謝申し上げます。サーバー側でのチェックの重要性は理解しております。ただ、JS側での挙動もみてみたいので今回は質問させて頂きました。プロの方からするとお気になさるかもしれませんが、私自身の優先順位もありますので仕方ないのはしょうがないですね。

m.ts10806

2019/03/11 03:36

老婆心が過ぎました。失礼しました。

GoGobuchiking

2019/03/11 03:38

いいえ。こちらこそド素人すぎて申し訳なかったです。

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

回答2件

ベストアンサー

.btnをクリックしないと$selectedには値が入らないので
undefinedをチェックしないと駄目ですね
むしろ#answerの値だけ見てればいいかと

javascript
1$(function(){
2  $('.btn').on('click', function(){
3    $(this).addClass('selected').siblings().removeClass('selected');;
4    $('#answer').val($(this).data('id'));
5  });
6  $('#result').on('click', function(){
7    if ($('#text1').val() === '' || $('#text2').val() === ''  || $('#answer').val() === ''){
8      alert('Choose One!');
9    } else {
10      $('form').submit();
11    }
12  });
13});
14

投稿2019/03/11 00:58

yambejp

総合スコア114777

GoGobuchiking

2019/03/11 13:13

御回答ありがとうございます。「undefinedをチェックしないと駄目ですね」で気付かされました。 $selected = ' ' を初期値に定義すればいいだけでした。凡ミスでした。また、紹介して頂いたコードでも試したところ、できました。 siblings()については知らないメソッドだったので勉強になりました。ありがとうございます。

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

$selectedに何が入るか確認しましょう。それが文字列と比較できる物か、確認しましょう。

【デバッグに大活躍! JavaScriptのconsole.logで値を表示しよう | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/27205

【ChromeのデベロッパーツールでJSをデバッグする方法(2018年版) - ICS MEDIA】
https://ics.media/entry/11735

投稿2019/03/10 14:40

kei344

総合スコア69400

GoGobuchiking

2019/03/10 14:50

コンソールは<input type="hidden" id="answer" name="answer" value="plus">となっています。よって$selected = <input type="hidden" id="answer" name="answer" value="plus">なので btn要素がクリックされない場合は$selectedは空になると思い、$selected === ' ' でうまくいくと思ったのですが。