Ping-Pong aka FizzBuzz test

Я новичок в программировании, и в настоящее время я застрял на Ping-Pong aka FizzBuzz. (Сделайте веб-страницу, на которой пользователю будет предложено ввести номер, и будет отображаться каждый номер до этого номера. Однако для кратных трех страниц страница печатает «ping», для кратных пяти, страница печатает «понг» и для кратных как трех, так и пяти (15), страница печатает «пинг-понг».)Ping-Pong aka FizzBuzz test

Я проверил здесь другие решения (например, this one), и они были полезны для понимания того, как решить Это. И я надеюсь, что мой javascript отражает это.

Моя проблема в том, что я застреваю, пытаясь взять номер ввода из формы, которую я имею на веб-странице, и запустить ее через javascript, если это имеет смысл.

Я почти уверен, что часть моего javascript - это всего лишь конгломерат бросания всего, что у меня было, что не самое лучшее. Может ли кто-нибудь проверить мой код и посмотреть, что я делаю неправильно здесь?

Вот мой HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
    <link href="css/styles.css" rel="stylesheet" type="text/css"> 
    <script src="js/jquery-1.11.2.js"></script> 
    <script src="js/scripts.js"></script> 

    <title>Ping-Pong Test</title> 
    </head> 

    <body> 
    <div class="container"> 
     <h1>Ping Pong Test</h1> 
     <p>Let's play the Ping-Pong game. The Ping-Pong game is a simple test that involves loops, conditionals, and variables. Enter your number below to start</p> 

     <form id="start-form"> 
     <label for="input-number">Your number:</label> 
     <input id="input-number" type="number"> 

     <button type="submit" class="btn">Calculate</button> 
     </form> 

     <div id="end-number"> 
     <ul id="results"></ul> 
     </div> 
    </div> 
    </body> 
</html>

И мой JavaScript:

$(document).ready(function() { 
$("#start-form").submit(function(event) { 
    var a = document.getElementById("#input-number"); 
    var num = a.elements[0].value; 
    var listItems = ""; 
    var i; 
    for (var i = 1; i <= num; i++) { 
    if (i % 15 === 0) { 
     console.log("Ping-Pong"); 
    } 
    else if (i % 3 === 0) { 
     console.log("Ping"); 
    } 
    else if (i % 5 === 0) { 
     console.log("Pong"); 
    } 
    else{ 
    console.log(i); 
    }; 

event.preventDefault(); 

}; 

});

Опять же, я новичок, так что если кто-то может разбить его шаг за шагом, я бы очень признателен , Благодарю.

источник

2015-01-08 Kyle Chase

Удалите # из .getElementById ('input-number'); – Slime

Также я уверен, что 'a' является элементом, ему не нужен бит' .elements [0] '. – mpen

, пожалуйста, создайте ручку кода или js скрипку в следующий раз. я создал один для вас и исправил его. у вас были две незначительные проблемы (уже упоминалось здесь): http://codepen.io/mnpenner/pen/QwdvLM?editors=101 – mpen

Это не так:

var a = document.getElementById("#input-number");

Должен быть один из приведенных ниже строк:

var a = document.getElementById("input-number"); 
// Or 
var a = $("#input-number").get(0); 
// Or 
var a = $("#input-number")[0];

Но это не решит вашу проблему. Вглядываясь в свой код. Я думаю, вы должны иметь форму затем получить первый элемент:

var a = document.getElementById("start-form"); 
var num = a.elements[0].value;

Но вы можете упростить еще больше. Почему бы просто не сделать это:

// remove the a variable 
var num = $("#input-number").val(); // get the input-number value

источник

2015-01-08 16:32:10 nanndoj

или '$ (" # input-number ") [0]' для полноты. – mpen

Хорошо, я обновил это, но он все еще не работает. Есть предположения? Благодарю. –

@KyleChase вы должны поместить свой обновленный код в jsfiddle или ручку кода. – fontophilic

на основе кода, я думаю, вам просто нужно немного синтаксис очищены для того, чтобы JQuery, чтобы использовать значение из формы.
Я взял ваш код, снял его для ясности и сделал из него скрипку. Вот ссылка:

http://jsfiddle.net/zwa5s3ao/3/

$(document).ready(function(){ 
 
    $("form").submit(function(event){ 
 
    var num = $('#input-number').val() 
 

 
    for (var i = 1; i <= num; i++) { 
 
     if (i % 15 === 0) { 
 
     $('#list').append('<li>'+"Ping-Pong"+'</li>');} 
 
     else if (i % 3 === 0) { 
 
     $('#list').append('<li>'+"Ping"+'</li>');} 
 
     else if (i % 5 === 0) { 
 
     $('#list').append('<li>'+"Pong"+'</li>');} 
 
     else{ 
 
     $('#list').append('<li>'+i+'</li>');} 
 

 
    }; 
 

 
    event.preventDefault(); 
 
    
 
    }); 
 
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<title>Ping-Pong Test</title> 
 

 
<body> 
 
    
 
    <form> 
 
    Your number: 
 
    <input type="number" name="input-number" id="input-number"> 
 
    <input type="submit" value="Calculate"> 
 
    </form> 
 

 
    <ul id="list"></ul> 
 
</body>

Надеется, что это помогает!

источник

2015-01-08 20:06:33 Bryan

Ping-Pong aka FizzBuzz test

ответ

Смежные вопросы