如何讓JavaScript來打印文本輸入到控制檯

我是新來的JavaScript編程所以我希望這是一個簡單的問題...我想我的網頁，以允許用戶輸入一個音樂曲目名稱和藝術家兩個單獨的字段，一旦你點擊'去'的JavaScript將運行並解析輸入到一個字符串。爲了測試，我嘗試瞭解這些輸入是否正在進行，並且試圖將它們打印到控制檯，但是沒有任何內容正在打印到控制檯。如何讓JavaScript來打印文本輸入到控制檯

<!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').on('button', function(e){

與

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

jQuery的.on()預計事件名稱作爲其第一個參數。

來源

2017-04-08 21:09:52 lazyvab

謝謝！它現在打印一些東西給控制檯，但它不是我輸入的值 - 我反而得到'undefined' –

@JonathanChappell你看了我的解決方案嗎？ – HenryDev

@HenryDev耶！它有點修復它，因爲它現在打印的值到控制檯，但是該值「未定義」，而不是他的文本值是 –

-1

沒有輸入類型type="textt"和texta。只有預定義的類型，如文本，電子郵件，密碼，複選框等...因此，請在兩個輸入中輸入「text」，以供參考使用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

如何讓JavaScript來打印文本輸入到控制檯

回答

相關問題