Question

基本思路是当用户在一个字段中输入他们的名字然后点击一个按钮，一个字符串＆＃34;嗨[name]等＆＃34;显示回他们。

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>

我希望我在问这个问题时做得很好。我是新来的，也是web dev的新手。我想知道为什么我的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是classes上的buttons。如果您愿意，也可以使用id's。

introduction也是div，并且没有value属性。所以它对你不起作用。如果您使用普通的javascript，请尝试使用innerText;如果您使用的是JQuery，请尝试使用.text()。

这是一个有效的JSFIDDLE。希望这有帮助。

Answer 2

该函数应位于文档就绪处理程序之外。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>

Answer 3

没有document.getElementByClass。

你可能意味着document.getElementsByClassName返回一个nodeList而不是一个单独的元素。

如果您想要第一个与该类匹配的项目：

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

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

没有必要使用＃infront。

var visitor_name_input = document.getElementById("visitor_name_input")

点击

3 个答案: