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
回答2件
あなたの回答
tips
プレビュー