javacriptでコンソールにテキスト入力を印刷する方法

私はJavaScriptプログラミングの初心者ですので、これは簡単な問題だと思っています。私は自分のウェブページに、ユーザーが音楽トラック名とアーティストを入力できるようにしたいと思っています。 2つの別々のフィールドと一度あなたがヒット 'を実行するjavascriptが実行され、文字列に入力を解析します。テストするために、私はこれらの入力が行われているかどうかを確認しようとしましたが、コンソールにそれらを印刷しようとしましたが、コンソールには何も印刷されません。javacriptでコンソールにテキスト入力を印刷する方法

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Spotify</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<main class="main-container"> 

    <div class="header"> 
    <p>TrackSelector</p> 
    </div> 
    <section> 
     <div class="form"> 
     <form action=""> 
    <input type="textt" class="track" placeholder="Enter track..." /> 
    <input type="texta" class="artist" placeholder="Enter artist..." /> 
    <button type="button" class="submit-btn">GO</button> 
      </form> 
      </div> 
    </section> 

</main> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="script.js"></script> 
</body> 
</html>

のJavascriptファイル：

const app = {}; 

//Allow the user to enter names 

app.events = function() { 
    $('form').on('button', function(e){ 
     e.preventDefault(); 
     let tracks = $('input[type=textt]').val(); 
     let artists = $('input[type=texta]').val(); 
     console.log(tracks); 
     console.log(artists); 
    }); 
}; 

// 

// 

app.init = function(){ 
    app.events(); 

}; 

$(app.init);

私は正しい入力に取るように指定し、正しいボタンの参照を指定していると考えているが、他の方法を試してみるために周り果たしているが、私はまだかなりこだわっています... 何か案は？

出典

2017-04-08 Jonathan Chappell

'textt'と' texta'では有効なタイプではありません。代わりにidsを使用して、読み取るフィールドを指定します。 – user3637541

$('form .submit-btn').on('click', function(e){

jQueryの.on()はその最初の引数としてイベント名を見込んで

$('form').on('button', function(e){

を交換してください。

出典

2017-04-08 21:09:52 lazyvab

ありがとう！コンソールに何かが表示されますが、入力した値ではありません。代わりに「未定義」になります –

@JonathanChappellあなたは私の解決策を見ましたか？ – HenryDev

@HenryDevええ！これは、コンソールに値を出力するという点で、これを修正していますが、その値は「未定義」であり、テキスト値は –

-1

入力タイプtype="textt"およびtextaはありません。テキスト、電子メール、パスワード、チェックボックスなどの事前定義されたタイプのみがあるので...両方の入力にタイプ "テキスト"を作成し、参照用にID：<input id="my_track" type="text">を使用してください。その後、JavaScriptで$('#my_track').val();を取得するには$('form').on('submit', func)

出典

2017-04-08 21:12:09

この実用的な解決法はどうですか？単に置き換える：

$('form').on('button', function(e){

を

$("form .submit-btn").click(function (e) {

const app = {}; 
 

 
    app.events = function() { 
 
     $("form .submit-btn").click(function (e) { 
 
      e.preventDefault(); 
 
      let tracks = $('#id1').val(); 
 
      let artists = $('#id2').val(); 
 
      console.log(tracks); 
 
      console.log(artists); 
 
     }) 
 
    }; 
 

 
    app.init = function(){ 
 
     app.events(); 
 

 
    }; 
 

 
    $(app.init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<main class="main-container"> 
 

 
    <div class="header"> 
 
     <p>TrackSelector</p> 
 
    </div> 
 
    <section> 
 
     <div class="form"> 
 
      <form action=""> 
 
       <input type="text" id = "id1" class="track" placeholder="Enter track..." /> 
 
       <input type="text" id = "id2" class="artist" placeholder="Enter artist..." /> 
 
       <button type="button" class="submit-btn">GO</button> 
 
      </form> 
 
     </div> 
 
    </section> 
 

 
</main>

出典

2017-04-08 21:14:06 HenryDev

'textt'と' texta'を続けることはあなたのブラウザではうまく動作しているように思えますが、解決策を使うことを強く勧めます。 –

@SergeyYarotskiyは、属性タイプ値にtexttとtextaを使用していたことに全く注意しませんでした。とにかく、私はちょうど私の答えを更新しました！ – HenryDev

javacriptでコンソールにテキスト入力を印刷する方法

答えて

関連する問題