如何让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来打印文本输入到控制台

回答

相关问题