質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.02%

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 337

YNTN

score 18

初歩的な質問になってしまう思いますが、
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" の4種類のアイコンがある
        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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/06/11 23:38

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

    キャンセル

  • x_x

    2019/06/12 09:54

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

    キャンセル

回答 2

+2

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/12 11:16

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

    キャンセル

0

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

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

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

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

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

<input id="A" placeholder="A"/ >          
<input id="B" placeholder="B"/ >   
<button id="search">検索</button>
// 普通 version
"use strict";

let _ = console.log,
type = v => ({}.toString.call(v));

function checkInputs() {
   let valA = document.getElementById('A').value,
   valB = document.getElementById('B').value;

   // A, B  空白
   if ( valA.trim() === ""  &&  valB.trim() === ""){

      _( "A, B is Blank!" )

   // Bのみ 空白
   } else if ( valA.trim() === "" ){
      _( "A is blank!" )

   // Aのみ 空白
   } else if ( valB.trim() === "" ){
      _( "B is blank!" )

   // A, B 文字あり
   } else {
      _( "ok" )
   }
};

$("#search").on("click", function(){
   checkInputs();
});
// より簡潔 version
let _ = console.log,
type = v => ({}.toString.call(v));

function isEmpty(val){
   return val.trim() === "";
}
function checkInputs() {
   let valA = $('#A').val(),
   valB = $('#B').val();

   // A, B  空白
   if ( isEmpty(valA)  &&  isEmpty(valB) ){
      _( "A, B is Blank!" )

   // Bのみ 空白
   } else if ( isEmpty(valA) ){
      _( "A is blank!" )

   // Aのみ 空白
   } else if ( isEmpty(valB) ){
      _( "B is blank!" )

   // A, B 文字あり
   } else {
      _( "ok!" )
   }
};

$("#search").on("click", function(){
   checkInputs();
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる