Ввод текстового поля не будет отображаться при нажатии

Основная идея заключается в том, что когда пользователь вводит свое имя в поле, затем нажимает кнопку, ему отображается строка «Привет [имя] и т. д.».

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 не работает. Большое спасибо за любое понимание этого!!

ОБНОВЛЕНИЕ: Вот код, который, наконец, сработал (вы, ребята, ROCK, спасибо!)

$(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.");
 });
});

Next I just have to figure out how to trigger some horizontal parallax when they scroll ^_^ (That's a whole other post, of course!!)

Я действительно не могу отблагодарить вас, ребята, потому что я на 100% самоучка в том немногом, что мне удалось понять до сих пор :)


textfield jquery
person Jenny Chisnell    schedule 18.09.2015    source источник
comment
introduction — это div, и у него нет атрибута value. попробуйте использовать introduction.innerText = 'Hi there, ' + name + '!' попробуйте этот jsfiddle для более чистого кода. jsfiddle.net/53bgwtxu   -  person Sushil    schedule 18.09.2015
comment
Вы смогли решить свою проблему @JennyChisnell?   -  person Sushil    schedule 18.09.2015
comment
Привет, Сушил, спасибо, я нашел работоспособное решение на основе полученных комментариев, см. обновление выше!   -  person Jenny Chisnell    schedule 20.09.2015
comment
хорошая работа @JennyChisnell   -  person Sushil    schedule 21.09.2015

Ответы (3)


arrow_upward
2
arrow_downward

вы смешиваете 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. так что у вас не получится. попробуйте использовать innerText, если вы используете простой javascript, или .text(), если вы используете JQuery.

вот рабочий JSFIDDLE для того же. надеюсь это поможет.

person Sushil    schedule 18.09.2015
comment
Я испробовал все предложения, которые я получил, и это то, что сработало для меня! - person Jenny Chisnell; 20.09.2015
comment
спасибо @JennyChisnell. не могли бы вы отметить это как ответ ?? - person Sushil; 21.09.2015

arrow_upward
0
arrow_downward

document.getElementByClass нет.

Вероятно, вы имели в виду document.getElementsByClassName, который возвращает список узлов, а не отдельный элемент.

если вам нужен 1-й элемент, соответствующий классу:

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

Вы также путаете селектор идентификатора jQuery с функцией возврата elementbyid.

Нет необходимости в # перед идентификатором.

var visitor_name_input = document.getElementById("visitor_name_input")
person Sean Wessell    schedule 18.09.2015

arrow_upward
0
arrow_downward

Функция должна быть вне обработчика готовности документа. 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>

person Pranav C Balan    schedule 18.09.2015
comment
как document.getElementByID("#visitor_name_input"); будет работать? - person Sushil; 18.09.2015