Въвеждането на текстово поле няма да се покаже при щракване

Основната идея е, когато потребителят въведе името си в поле, след което щракне върху бутон, низът „Здравей [име] и т.н.“ се показва обратно към него.

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

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
Здравей Sushil, благодаря ти, разбрах работещо решение въз основа на получените коментари, вижте актуализацията по-горе!   -  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, който връща nodeList, а не отделен елемент.

ако искате 1-ви елемент, който съответства на класа:

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

Вие също обърквате jQuery id селектор с функцията за връщане на 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