单击时不显示文本字段输入

Question

基本思想是当用户在字段中输入他们的名字然后点击一个按钮时，一个字符串“Hi [name] etc”会显示给他们。

jQuery:

    $(document).ready(function() {
        function sayHi(){
          var visitor_name_input = document.getElementByID("#visitor_name_input");
          var introduction = document.getElementByClass(".introduction");
          var name = visitor_name_input.value;
          introduction.value = "Hi there, " + name + "!"
        });
    });

HTML：

<p id="greeting">
            <input type="text" id="visitor_name_input" placeholder="what's your name?">
            <input type="image" class="skip-btn" onclick="sayHi()" src="skipbtn.png" height="50px"/></a>
            <input type="image" class="enter-btn" onclick = "sayHi()" src="enterbtn1.png" height="50px" />
         </p>

    <div class="introduction">

    </div>

我希望我在提出这个问题时做得很好。我是新来的，也是网络开发的新手。我想知道为什么我的 jQuery 不起作用。非常感谢您对此的任何见解！

更新：这是最终起作用的代码（你们摇滚，谢谢！）

$(document).ready(function() {

 $('.skip-btn, .enter-btn').on('click', function(){
      var visitor_name_input = $("#visitor_name_input");
      var introduction = $(".introduction");
      var name = visitor_name_input.val();
      $(introduction).text("Hi " + name + ", I'm Jenny.  I create user experiences on the web.  Scroll down to see my resume.");
 });
});

接下来我只需要弄清楚当它们滚动时如何触发一些水平视差 ^_^（当然，这是另一篇文章！！）

我真的非常感谢你们，因为我是 100% 自学成才的，到目前为止我只掌握了一点点 :)

Answer 1

您将JQuery 和Javascript 混合在一起。

由于您已经在使用JQuery，您可以像这样更新您的 js 代码。

 $(document).ready(function() {
     $('.skip-btn, .enter-btn').on('click', function() {
         var visitor_name_input = $("#visitor_name_input");
         var introduction = $(".introduction");
         var name = visitor_name_input.val();
         $(introduction).text("Hi there, " + name + "!");
     });
 });

其中.skip-btn, .enter-btn 是您的buttons 上的classes。如果你愿意，你也可以使用id's。

还有introduction 是div，它没有value 属性。所以它对你不起作用。如果您使用的是纯 JavaScript，请尝试使用 innerText；如果您使用的是 JQuery，请尝试使用 .text()。

这是一个同样有效的JSFIDDLE。希望这会有所帮助。

Answer 2

没有document.getElementByClass。

您可能是指document.getElementsByClassName，它返回一个nodeList 而不是一个单独的元素。

如果您想要第一个与班级匹配的项目：

var introduction = document.getElementsByClassName("introduction")[0];

您还将 jQuery id 选择器与返回 elementbyid 的函数混淆了。

id前面不需要#号。

var visitor_name_input = document.getElementById("visitor_name_input")

Answer 3

该函数应该在文档就绪处理程序之外。onclick 只能在全局上下文中访问该函数。

function sayHi() {
  var visitor_name_input = document.getElementById("visitor_name_input"),
    //                   d should be small letter -^--^-- no need for #  
    introduction = document.getElementsByClassName("introduction"),
    //   getElementsByClass is not valid it should be getElementsByClassName , then there is no need for . here  
    name = visitor_name_input.value;

  introduction[0].innerHTML = "Hi there, " + name + "!";
    //          -^- since you are getting collection of dom objects so you need to use [0] for getting first one. also there is no value attribute for div. You need to innerHTML for setting the html content.
}

<p id="greeting">
  <input type="text" id="visitor_name_input" placeholder="what's your name?">
  <input type="image" class="skip-btn" onclick="sayHi()" src="skipbtn.png" height="50px" />

  <input type="image" class="enter-btn" onclick="sayHi()" src="enterbtn1.png" height="50px" />
</p>

<div class="introduction">

</div>

更新： 你被标记为 jQuery 你可以让它更简单

$(document).ready(function() {
  $('.skip-btn,.enter-btn').click(function() {
    var visitor_name_input = $("#visitor_name_input"),
      introduction = $(".introduction"),
      name = visitor_name_input.val();
    // get input value using val()

    introduction.html("Hi there, " + name + "!");
    // setting html content inside div using html(), you can use text() for setting text content

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="greeting">
  <input type="text" id="visitor_name_input" placeholder="what's your name?">
  <input type="image" class="skip-btn" src="skipbtn.png" height="50px" />
  <input type="image" class="enter-btn" src="enterbtn1.png" height="50px" />
</p>

<div class="introduction">

</div>