2016-01-06 6 views
0

Я собираюсь создать веб-страницу с кнопкой. Если нажать кнопку, пользователю будет предложено ввести текст. Если пользователь не вводит пустую строку или символ x или не нажимает кнопку «Отмена», текст, который был введен, добавляется как тег <p> с желтым фоном в тело документа.Обработка событий при создании веб-страниц

Ниже мой код, который не работает, можете ли вы мне помочь?

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Simple Demo</title> 
    <style> 
    p { 
     background-color: yellow; 
    } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
    $(document).ready(function() { 

     $("#myButton").click(function() { 
      var message = prompt("Enter some text..."); 
      if ($(this).data("clicked") == true;) { 
      document.write(message); 
      } else { 
      message === null || message === x || $("#myCancelButton").click(function) { 
       $("body").append("<p>" + message "</p>"); 
      }); 
     } 
     }); 
    }); 
    </script> 
</head> 

<body> 
    <button id="myButton">Click Me!</button> 
    <button id="myCancelButton">Cancel!</button> 
</body> 

</html> 
+0

определить «не работает» первый ... На первый взгляд, хотя вы проверка 'данных («щелкнул»)', но, кажется, не существует каких-либо 'data-clicked' в кнопке, поэтому я не уверен, уверены ли вы в том, что вы на самом деле там делаете. Среди других вещей, которые выглядят не совсем правильно – lascort

+0

@ lascort: вы правы, потому что то, что мне нужно сделать, немного смущает меня, и я не уверен, что я на правильном пути. – Moonlight

+0

У вас есть синтаксические ошибки в вашем JavaScript. Проверьте консоль. –

ответ

0

Вы сделали здесь гору из мухихилла!

  1. Встроенный в строке есть кнопка отмены уже - когда пользователь нажимает на нее, то prompt вызов возвращает null.
  2. Если вы используете обработчик jquery для нажатия кнопки, вы знаете, что пользователь нажал кнопку.

$("#myButton").click(function() { 
 
    var result = prompt("Enter some text"); 
 
    if(result != null && result != "x"){ 
 
    $('body').append("<p>" + result + "</p>"); 
 
    } 
 
});
p{ 
 
background-color:yellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="myButton">Click me!</button>

+0

благодарит миллион за вашу помощь. :) – Moonlight

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