{"id":1167,"date":"2020-10-16T00:26:48","date_gmt":"2020-10-15T15:26:48","guid":{"rendered":"https:\/\/haugenic.com\/?p=1167"},"modified":"2020-10-17T01:25:02","modified_gmt":"2020-10-16T16:25:02","slug":"test","status":"publish","type":"post","link":"https:\/\/haugenic.com\/?p=1167","title":{"rendered":"\u3010JavaScript\u3011\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u306e\u8a3a\u65ad\u30c6\u30b9\u30c8\u3067\u5408\u8a08\u70b9\u6570\u306b\u5fdc\u3058\u3066\u30b3\u30e1\u30f3\u30c8\u3092\u5909\u3048\u308b\u65b9\u6cd5"},"content":{"rendered":"<h2>\u3084\u308a\u305f\u3044\u3053\u3068<\/h2>\r\n<div class=\"st-square-checkbox st-square-checkbox-nobox\">\r\n<ul>\r\n\t<li>3\u629e\u306e\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3092\u4f5c\u6210\u3057\u3001\u5224\u5b9a\u30dc\u30bf\u30f3\u3067\u96c6\u8a08\u3092\u51fa\u3059<\/li>\r\n\t<li>\u96c6\u8a08\u306e\u7d50\u679c\u306b\u5fdc\u3058\u3066\u3001if\u6587\u3067\u30b3\u30e1\u30f3\u30c8\u3092\u51fa\u3059<\/li>\r\n\t<li>\u672a\u9078\u629e\u306e\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u304c\u3042\u308b\u5834\u5408\u306f\u30a8\u30e9\u30fc\u3092\u51fa\u3059<\/li>\r\n\t<li>IE\u3067\u3082\u52d5\u4f5c\u3059\u308b<\/li>\r\n<\/ul>\r\n<\/div>\r\n<p>\u300c<span class=\"marker_yellow_futo\">JavaScript\uff0b\u8a3a\u65ad\u30c6\u30b9\u30c8<\/span>\u300d\u3067\u691c\u7d22\u3059\u308c\u3070 \u4f3c\u305f\u3088\u3046\u306a\u30d7\u30ed\u30b0\u30e9\u30e0\u306f\u3044\u304f\u3064\u3082\u30d2\u30c3\u30c8\u3057\u307e\u3059\u304c\u3001\u3053\u306e4\u3064\u3092\u6e80\u305f\u3059\u3082\u306e\u304c\u306a\u304b\u306a\u304b\u7121\u304b\u3063\u305f\u305f\u3081\u81ea\u5206\u3067\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<br \/>\r\n\u30b3\u30d4\u30da\u3067\u4f7f\u3048\u307e\u3059\u3002<\/p>\r\n<h2>DEMO<\/h2>\r\n<form id=\"shitsumon\" name=\"shitsumon\" onsubmit=\"check(); return false;\">\r\n<ul>\r\n\t<li>\r\n<p>\u671d\u98df\u306b\u7d76\u5bfe\u6b20\u304b\u305b\u306a\u3044\u3082\u306e\u306f\uff1f<\/p>\r\n<label><input name=\"q0\" type=\"radio\" value=\"A\" required=\"\" \/>A.\u5375\u6599\u7406<\/label><br \/>\r\n<label><input name=\"q0\" type=\"radio\" value=\"B\" \/>B.\u30e8\u30fc\u30b0\u30eb\u30c8<\/label><br \/>\r\n<label><input name=\"q0\" type=\"radio\" value=\"C\" \/>C.\u7d0d\u8c46<\/label><\/li>\r\n\t<li>\r\n<p>\u30e9\u30f3\u30c1\u4f55\u98df\u3079\u308b\uff1f<\/p>\r\n<label><input name=\"q1\" type=\"radio\" value=\"A\" required=\"\" \/>A.\u30aa\u30e0\u30e9\u30a4\u30b9<\/label><br \/>\r\n<label><input name=\"q1\" type=\"radio\" value=\"B\" \/>B.\u30b0\u30e9\u30bf\u30f3<\/label><br \/>\r\n<label><input name=\"q1\" type=\"radio\" value=\"C\" \/>C.\u9ebb\u5a46\u8c46\u8150<\/label><\/li>\r\n\t<li>\r\n<p>3\u6642\u306e\u304a\u3084\u3064\u3068\u3044\u3048\u3070\uff1f<\/p>\r\n<label><input name=\"q2\" type=\"radio\" value=\"A\" required=\"\" \/>A.\u30d7\u30ea\u30f3<\/label><br \/>\r\n<label><input name=\"q2\" type=\"radio\" value=\"B\" \/>B.\u30ec\u30a2\u30c1\u30fc\u30ba\u30b1\u30fc\u30ad<\/label><br \/>\r\n<label><input name=\"q2\" type=\"radio\" value=\"C\" \/>C.\u5927\u798f<\/label><\/li>\r\n<\/ul>\r\n<input type=\"submit\" value=\"\u5224\u5b9a\uff01\" class=\"hantei\" \/><\/form>\r\n<div id=\"kekka\">\u3053\u3053\u306b\u7d50\u679c\u304c\u51fa\u308b\u3088\uff01<\/div>\r\n<h3 class=\"sa sa--up\">\u30b3\u30e1\u30f3\u30c8\u306e\u6761\u4ef6\u5206\u5c90<\/h3>\r\n<p>A\u304c\u591a\u3044\u5834\u5408\u306f\u300c\u5375\u597d\u304d\u3060\u306d\uff01\u300d<br \/>\r\nB\u304c\u591a\u3044\u5834\u5408\u306f\u300c\u4e73\u88fd\u54c1\u597d\u304d\u3060\u306d\uff01\u300d<br \/>\r\nC\u304c\u591a\u3044\u5834\u5408\u306f\u300c\u3082\u3057\u304b\u3057\u3066\u8c46\u597d\u304d\uff1f\u300d<br \/>\r\nABC\u304c1\u500b\u305a\u3064\u9078\u629e\u3055\u308c\u305f\u5834\u5408\u306f\u300c\u30d0\u30e9\u30f3\u30b9\u306e\u826f\u3044\u30c1\u30e7\u30a4\u30b9\u3060\u306d\uff01\u300d\u3068\u51fa\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\r\n<h2>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;form id=\"shitsumon\" name=\"shitsumon\" onsubmit=\"check(); return false;\"&gt;\r\n&lt;ul&gt;\r\n&lt;li&gt;\r\n&lt;p&gt;\u671d\u98df\u306b\u7d76\u5bfe\u6b20\u304b\u305b\u306a\u3044\u3082\u306e\u306f\uff1f&lt;\/p&gt;\r\n&lt;label&gt;&lt;input name=\"q0\" type=\"radio\" value=\"A\" required=\"\" \/&gt;A.\u5375\u6599\u7406&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;label&gt;&lt;input name=\"q0\" type=\"radio\" value=\"B\" \/&gt;B.\u30e8\u30fc\u30b0\u30eb\u30c8&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;label&gt;&lt;input name=\"q0\" type=\"radio\" value=\"C\" \/&gt;C.\u7d0d\u8c46&lt;\/label&gt;&lt;\/li&gt;\r\n&lt;li&gt;\r\n&lt;p&gt;\u30e9\u30f3\u30c1\u4f55\u98df\u3079\u308b\uff1f&lt;\/p&gt;\r\n&lt;label&gt;&lt;input name=\"q1\" type=\"radio\" value=\"A\" required=\"\" \/&gt;A.\u30aa\u30e0\u30e9\u30a4\u30b9&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;label&gt;&lt;input name=\"q1\" type=\"radio\" value=\"B\" \/&gt;B.\u30b0\u30e9\u30bf\u30f3&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;label&gt;&lt;input name=\"q1\" type=\"radio\" value=\"C\" \/&gt;C.\u9ebb\u5a46\u8c46\u8150&lt;\/label&gt;&lt;\/li&gt;\r\n&lt;li&gt;\r\n&lt;p&gt;3\u6642\u306e\u304a\u3084\u3064\u3068\u3044\u3048\u3070\uff1f&lt;\/p&gt;\r\n&lt;label&gt;&lt;input name=\"q2\" type=\"radio\" value=\"A\" required=\"\" \/&gt;A.\u30d7\u30ea\u30f3&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;label&gt;&lt;input name=\"q2\" type=\"radio\" value=\"B\" \/&gt;B.\u30ec\u30a2\u30c1\u30fc\u30ba\u30b1\u30fc\u30ad&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;label&gt;&lt;input name=\"q2\" type=\"radio\" value=\"C\" \/&gt;C.\u5927\u798f&lt;\/label&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;input type=\"submit\" value=\"\u5224\u5b9a\uff01\" class=\"hantei\" \/&gt;&lt;\/form&gt;\r\n&lt;div id=\"kekka\"&gt;\u3053\u3053\u306b\u7d50\u679c\u304c\u51fa\u308b\u3088\uff01&lt;\/div&gt;<\/pre>\r\n<h3 class=\"sa sa--up\">JavaScript\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">function check() {\r\n    let str = [];\r\n\r\n    \/\/\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u306e\u4e2d\u8eab\u3092\u53d6\u5f97\r\n    const q = [document.shitsumon.q0, document.shitsumon.q1, document.shitsumon.q2];\r\n\r\n    \/\/A\u30fbB\u30fbC\u305d\u308c\u305e\u308c\u306e\u5408\u8a08\u70b9\u6570\u3092\u5165\u308c\u308b\u305f\u3081\u306e\u5909\u6570\r\n    var aaa = 0;\r\n    var bbb = 0;\r\n    var ccc = 0;\r\n\r\n    \/\/\u3069\u306e\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u304c\u9078\u629e\u3055\u308c\u305f\u304b\u5224\u5b9a\u3057\u3001\u70b9\u6570\u3092\u52a0\u7b97\r\n    for (let n = 0; n &lt; q.length; n++) {\r\n        for (let i = 0; i &lt; q[n].length; i++) {\r\n            if (q[n][i].checked) {\r\n                str[n] = q[n][i].value;\r\n                if (str[n] == \"A\") {\r\n                    aaa++;\r\n                } else if (str[n] == \"B\") {\r\n                    bbb++;\r\n                } else if (str[n] == \"C\") {\r\n                    ccc++;\r\n                }\r\n                break;\r\n            }\r\n        }\r\n    }\r\n\r\n    \/\/\u30b3\u30e1\u30f3\u30c8\u306e\u6761\u4ef6\u5206\u5c90\r\n    var message = \"\";\r\n    if (aaa &gt; bbb &amp;&amp; aaa &gt; ccc) {\r\n        message = \"\u5375\u597d\u304d\u3060\u306d\uff01\";\r\n    } else if (bbb &gt; aaa &amp;&amp; bbb &gt; ccc) {\r\n        message = \"\u4e73\u88fd\u54c1\u597d\u304d\u3060\u306d\uff01\";\r\n    } else if (ccc &gt; aaa &amp;&amp; ccc &gt; bbb) {\r\n        message = \"\u3082\u3057\u304b\u3057\u3066\u8c46\u597d\u304d\uff1f\";\r\n    } else {\r\n        message = \"\u30d0\u30e9\u30f3\u30b9\u306e\u826f\u3044\u30c1\u30e7\u30a4\u30b9\u3060\u306d\uff01\";\r\n    }\r\n\r\n    \/\/HTML\u3078\u51fa\u529b\r\n    var html = '&lt;div&gt;';\r\n    html += 'A=' + aaa + '\u500b&lt;br&gt;';\r\n    html += 'B=' + bbb + '\u500b&lt;br&gt;';\r\n    html += 'C=' + ccc + '\u500b&lt;br&gt;&lt;br&gt;';\r\n    html += '' + message + '';\r\n    html += '&lt;\/div&gt;';\r\n    document.getElementById(\"kekka\").innerHTML = html;\r\n}<\/pre>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<p>\u898b\u6804\u3048\u306e\u90e8\u5206\u3002\u7121\u304f\u3066\u3082OK\u3002<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/*\u8cea\u554f\u90e8\u5206\u3092\u592a\u5b57\u306b\uff06\u7a7a\u767d\u8abf\u6574*\/\r\n#shitsumon p {\r\n  margin: 10px 0 5px 0;\r\n  font-weight: bold;\r\n}\r\n\r\n#shitsumon li:not(:last-child) {\r\n  margin-bottom: 20px;\r\n}\r\n\r\n\/*\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3068\u30c6\u30ad\u30b9\u30c8\u306e\u9593\u306b\u4f59\u767d\u3092\u5165\u308c\u308b*\/\r\n#shitsumon input[type=\"radio\"] {\r\n  margin-right: 5px;\r\n}\r\n\r\n\/*\u5224\u5b9a\u30dc\u30bf\u30f3\u306e\u30c7\u30b6\u30a4\u30f3*\/\r\n.hantei {\r\n  background: #cc0000;\r\n  color: #fffec5;\r\n  font-weight: bold;\r\n  border: none;\r\n}\r\n\r\n\/*\u7d50\u679c\u90e8\u5206\u306e\u7a7a\u767d\u8abf\u6574*\/\r\n#kekka {\r\n  margin: 20px 0;\r\n}\r\n\r\n\/*\u7d50\u679c\u90e8\u5206\u306e\u30c7\u30b6\u30a4\u30f3*\/\r\n#kekka div {\r\n  background: rgba(0, 0, 0, 0.1);\r\n  display: inline-block;\r\n  padding: 10px;\r\n  border-radius: 20px 10px 80px 30px\/40px 70px 30px 40px;\r\n}<\/pre>","protected":false},"excerpt":{"rendered":"HTML\u3068JavaScript\u3067\u8a3a\u65ad\u30c6\u30b9\u30c8\u3092\u4f5c\u308b\u3084\u308a\u65b9\u30023\u629e\u306e\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3092\u4f5c\u6210\u3057\u5224\u5b9a\u30dc\u30bf\u30f3\u3067\u96c6\u8a08\u3092\u51fa\u3057\u307e\u3059\u3002","protected":false},"author":1,"featured_media":1203,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/1167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1167"}],"version-history":[{"count":23,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/1167\/revisions"}],"predecessor-version":[{"id":1265,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/1167\/revisions\/1265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/media\/1203"}],"wp:attachment":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}