javascript内でjqueryの関数を呼び出したい

初歩的な質問になってしまう思いますが、
javascriptのif関数の中にjqueryで書いた処理を簡潔にコーディングしたいのですが、
いまいち上手くいきません。

作りたいプログラムは、検索ボタンを押したら、テキストエリアA,Bがブランクのときにのみ
jqueryの関数を実行させアラートを出すようなプログラムです。

ソースコードを冗長化させたくないので
すっきりかける書き方等あれば教えていただきたいと思います。

<body>
    <input id="A"/ >          
    <input id="B"/ >   
    <div href="XXXXX" onclick="click();" >検索</div>
</body>



//・jquery関数A（sweetalert）
    <script>
        $('.btn-square-pop').on('click', function() {
        // "success" "warning" "error" "info" の４種類のアイコンがある
        Swal.fire({
            type:"success",
            title: "入力してください",
            text: "入力してください",
        });
        });
    </script>


//・js関数B
        <script>
            function click() {
                if (document.getElementById('A').value !== "" || document.getElementById('A').value !== "　" ) {
                    //ここにjquery関数Aを埋め込みたい
                  }  else if (document.getElementById('B').value !== "" || document.getElementById('B').value !== "　" ) {
                    //ここにjquery関数Aを埋め込みたい
                  }else{
                      //二つのテキストエリアに入力があるときに検索処理実行
                    }
            }
        </script>

kei344

2019/06/11 14:38

HTMLも提示し、JavaScriptも（関数clickをどのように使う予定かなど）全体像のわかるコードを提示されたほうが回答しやすいです。

x_x

2019/06/12 00:54

その名前から、そもそも js関数B(click()) は呼ばれていないのではないかと思いますが、確認しましたか？

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

回答2件

jQueryを利用できるならonclickなんてローテクを使わずに
素直にすべてjQueryで処理するのが賢明です

なお
$('.btn-square-pop').on('click'・・・
で設定した処理を実行したいだけなら

$('.btn-square-pop').eq(0).trigger('click')
すればよいでしょう

投稿2019/06/12 00:12

yambejp

総合スコア114843

yambejp

2019/06/12 02:16

clickを実行すると属性(?)が変わってしまうHTML要素もあるので運用面での注意は必要です

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

シンプルにまとめてみました。

勿論jQueryも簡潔なコードを書くのに役立ちます。
ただ、今回コードを見させて頂き、それ以外にも簡潔化できる部分が多くあったように思います。

私見ですが、ポイントとしては、

dry(don't repeat yourself)原則Don't Repeat Yourself -Wikipedia: 「繰り返さない」という意味。例えば、長い記述のものは割り当てる、2回以上書かない。また、似たような処理、同じ処理は、なるべく細かく区切って、関数にまとめる等です。
余白・インデントを適切に取る(これは慣れと経験が必要かもです)
コメントを適切に書く。簡潔に・分かりやすくを心がける。
変数の宣言、関数の定義は、コードの始めに。

jsは「普通版」・「より簡潔版」の2パターン用意しました????

html
1<input id="A" placeholder="A"/ >          
2<input id="B" placeholder="B"/ >   
3<button id="search">検索</button>

js
1// 普通 version
2"use strict";
3
4let _ = console.log,
5type = v => ({}.toString.call(v));
6
7function checkInputs() {
8   let valA = document.getElementById('A').value,
9   valB = document.getElementById('B').value;
10   
11   // A, B  空白
12   if ( valA.trim() === ""  &&  valB.trim() === ""){
13      
14      _( "A, B is Blank!" )
15      
16   // Bのみ 空白
17   } else if ( valA.trim() === "" ){
18      _( "A is blank!" )
19   
20   // Aのみ 空白
21   } else if ( valB.trim() === "" ){
22      _( "B is blank!" )
23   
24   // A, B 文字あり
25   } else {
26      _( "ok" )
27   }
28};
29
30$("#search").on("click", function(){
31   checkInputs();
32});

js
1// より簡潔 version
2let _ = console.log,
3type = v => ({}.toString.call(v));
4
5function isEmpty(val){
6   return val.trim() === "";
7}
8function checkInputs() {
9   let valA = $('#A').val(),
10   valB = $('#B').val();
11   
12   // A, B  空白
13   if ( isEmpty(valA)  &&  isEmpty(valB) ){
14      _( "A, B is Blank!" )
15      
16   // Bのみ 空白
17   } else if ( isEmpty(valA) ){
18      _( "A is blank!" )
19   
20   // Aのみ 空白
21   } else if ( isEmpty(valB) ){
22      _( "B is blank!" )
23   
24   // A, B 文字あり
25   } else {
26      _( "ok!" )
27   }
28};
29
30$("#search").on("click", function(){
31   checkInputs();
32});