जब आप मेरी टू-डू सूची के इनपुट बॉक्स के अंदर क्लिक करते हैं और एंटर दबाते हैं, तो सूची में एक छोटी लाइन जुड़ जाती है। (जब आप टेक्स्ट दर्ज करते हैं, तो लाइन की ऊंचाई नियमित ऊंचाई होती है।) इसका क्या कारण हो सकता है?

मेरे पूरे कोड के लिए कृपया my CodePen देखें। मुझे यकीन नहीं है कि यह प्रासंगिक है, लेकिन यहां मेरी जावास्क्रिप्ट है:

$(function() {

  $('.button').click(function() {
    let toAdd = $('input[name=listItem]').val();
    // Inserts li as first child of ul
    $('ul').prepend('<li>' + toAdd + '</li>');
    // Clears input box after clicking '+'
    $('input[name=listItem]').val('');
  });

  // Upon hitting enter, triggers button click and prevents page from refreshing and event bubbling and capturing/trickling
  $('input[name=listItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      e.preventDefault();
    };
  });

  $('ul').on('click', 'li', function() {
    // Upon list item click, toggleClass() adds class 'strike' for it and fadeOut() completely hides it
    $(this).toggleClass('strike').fadeOut('slow');
  });

});
0
nCardot 4 अप्रैल 2018, 09:39

4 जवाब

सबसे बढ़िया उत्तर

यह देखने के लिए चेक जोड़ने का प्रयास करें कि पहले इनपुट बॉक्स में कुछ नहीं है:

$('.button').click(function() {
  let toAdd = $('input[name=listItem]').val();
  if (toAdd === '') return;
1
CertainPerformance 4 अप्रैल 2018, 06:42

ES6 सिंटैक्स का उपयोग करना

    $('.button').on('click'() =>  {
    let toAdd = $('input[name=listItem]').val();
    toAdd === '' ? return : null 
1
Deano 4 अप्रैल 2018, 06:49

नीचे दिए गए दोनों उत्तर सही हैं और इसलिए अपवोट किया गया है लेकिन आप इस स्थिति को दूर करने के लिए सत्यापन जोड़ने का प्रयास कर सकते हैं

$(function() {

  $('.button').click(function() {
    let toAdd = $('input[name=listItem]').val();
    if (toAdd === '') {
      alert("Input should not be blank");
      $('input[name=listItem]').focus();
      return;
    }
    // Inserts li as first child of ul
    $('ul').prepend('<li>' + toAdd + '</li>');
    // Clears input box after clicking '+'
    $('input[name=listItem]').val('');
  });

  // Upon hitting enter, triggers button click and prevents page from refreshing and event bubbling and capturing/trickling
  $('input[name=listItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      e.preventDefault();
    };
  });

  $('ul').on('click', 'li', function() {
    // Upon list item click, toggleClass() adds class 'strike' for it and fadeOut() completely hides it
    $(this).toggleClass('strike').fadeOut('slow');
  });

});
body {
  text-align: center;
  background: #dfdfdf;
  font-family: Helvetica;
  font-size: 14px;
  color: #666;
  background: linear-gradient(to left, #da4453, #89216b);
}

.container {
  padding: 20px;
  padding-top: 5px;
  width: 400px;
  /* 0 is for top and bottom and auto (set to equal values for each by browser) for left-right */
  margin: 0 auto;
  margin-top: 40px;
  background: #eee;
  border-radius: 5px;
}

form {
  /* Needed to display button next to input box  */
  display: inline-block;
}

input[type="text"] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 29em;
  color: #666;
}

/* Sets appearance of input box boundaries when user clicks inside it */
input:focus {
  border-color: #da4453;
  /* L to R: horizontal offset, vertical offset, blur radius. A in RGBA is alpha parameter, a number between 0.0 (fully transparent) and 1.0 (fully opaque) */
  box-shadow: 0 0 8px rgba(229, 103, 23, 0.6);
  outline: 0 none;
}

button.button {
  margin-left: -29.8px;
  /* 2px added to account for default 1px padding of input box set by user agent (browser) stylesheet */
  height: -webkit-calc(1.6em + 2px);
  height: calc(1.6em + 2px);
  width: 25px;
  color: grey;
  border: none;
}

.button:hover {
  cursor: pointer;
  opacity: 0.8;
  color: #9a9797;
}

/* Remove margins and padding from list */
ul {
  margin: 0;
  padding: 0;
}

/* Applies styling to any li descendants of ul (descendant combinator) */
ul li {
  text-align: left;
  /* Prevents default bullet points */
  list-style-type: none;
  margin: auto;
  cursor: pointer;
  position: relative;
  background-color: #eee;
  /* First value sets top and bottom padding; second value sets right and left */
  padding: 1.5px 0;
}

/* Set all odd list items to a different color (zebra stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Sets darker background color on hover over list items */
ul li:hover {
  background-color: #ddd;
}

.strike {
  text-decoration: line-through;
}
<html>
    <head>
      <meta charset="UTF-8">
    	<title>To-Do List</title>
      <link rel="stylesheet" href="styles.css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="designs.js"></script>
  	</head>
  	<body>
      <div class="container">
    		<h2>To Do</h2>
    		<form name="listForm">
    			<input type="text" name="listItem" placeholder="Add new">
          <button type="button" class="button">+</button>
        </form>
    		<br><br>
    		<ul>
          <li>Work on projects for one hour</li>
          <li>Go for a walk</li>
          <li>Call parents</li>
        </ul>
      </div>
  	</body>
  </html>
$('.button').click(function() {
    let toAdd = $('input[name=listItem]').val();
    // Inserts li as first child of ul
    if(toAdd == ""){
     alert("Input Should no be blank");
     return;
    }
    $('ul').prepend('<li>' + toAdd + '</li>');
    // Clears input box after clicking '+'
    $('input[name=listItem]').val('');
  });
2
Nikhil Ghuse 4 अप्रैल 2018, 06:52

बस आप जो मूल्य जोड़ रहे हैं उसकी जांच करें:

$('.button').click(function() {
    let toAdd = $('input[name=listItem]').val();
    // Inserts li as first child of ul
    if( toAdd == ""){
      return false; // return on empty value
    }
    $('ul').prepend('<li>' + toAdd + '</li>');
    // Clears input box after clicking '+'
    $('input[name=listItem]').val('');
  });
2
Yuri 4 अप्रैल 2018, 06:42