2015-11-09 1 views
1

Mon vérificateur de palindrome n'entraîne plus la méthode suivante lengthChecker() et ne tient plus compte du fait que lorsqu'un mot n'est pas un palindrome, un message d'alerte indiquant que son palindrome n'apparaît pas. Quel pourrait être le problème? Aussi je le veux ainsi montrer l'entrée de l'utilisateur sur le message d'alerte, au lieu de [object HTMLInputElement].Numéro du vérificateur Palindrome

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Lesson #6 Homework</title> 
    <script type="text/javascript" src="./js/palindrome.js"></script> 
</head> 

<body> 
    <h1>Is it a Palindrome?</h1> 
    <div id="mainCont"> 
     <p>Hello. Please enter a word, and I'll see if it is a palindrome.</p> 
     <p>Word: 
      <input type="text" id="str" name="string" /> 
      <button id="checkInput">Submit</button> 
     </p> 
    </div> 
</body> 

</html> 

Voici la JS dès maintenant:

function lengthChecker() { 
    var str = document.getElementById("str").value; 
    if (str.length > 10) { 
     alert("Sorry. Your input surpasses the 10 characters maximum. Please try again.") 
     return false; 
    } else if (str.length == 0) { 
     alert("Sorry. Your input is too short, and doesn't meet the 10 characters maximum. Please try again.") 
     return false; 
    } 
    palindrome(); 
} 

function palindrome() { 
    var revStr = ""; 
    var str = document.getElementById("str").value; 
    var i = str.length; 
    for (var j = i; j >= 0; j--) { 
     revStr = revStr + str.charAt(j); 
    } 
    if (str == revStr) { 
     isPalindrome(); 
    } else { 
     notPalindrome(); 
    } 
} 

function isPalindrome() { 
    alert(str + " is a Palindrome."); 
} 

function notPalindrome() { 
    alert(str + " isn't a Palindrome."); 
} 

document.addEventListener("DOMContentLoaded", function (e) { 
    var el = document.getElementById("checkInput"); 
    el.addEventListener("click", isPalindrome); 
}); 
+0

Pourquoi avez-vous 'el.addEventListener ("clic", isPalindrome);'? Donc, il sortira toujours 'est un Palindrome', je suppose. –

+0

'el.addEventListener (" clic ", lengthChecker);' [Démo] (https://jsfiddle.net/tusharj/qe777kvk/). Il y a tellement de place pour l'amélioration du code – Tushar

+0

Pourquoi avez-vous choisi «10» comme longueur maximale? _Tattarrattat_ est un mot de 12 lettres dans l'OED qui est un palindrome, et d'autres langues ont beaucoup de longs palindromes de mot simple, par exemple le 13 long _reliefpfeiler_ dans _German_ –

Répondre

0
el.addEventListener("click", isPalindrome); 

devrait être

el.addEventListener("click", lengthChecker); 

Et ces fonctions devraient prendre un argument de chaîne:

function isPalindrome(str) { 
    alert(str + " is a Palindrome."); 
} 

function notPalindrome(str) { 
    alert(str + " isn't a Palindrome."); 
} 

Lorsque l'événement click est déclenché, votre code appelle isPalindrome qui imprime simplement un message et ne vérifie pas la valeur. Et en passant, lorsque votre fonction est appelée, l'argument n'est pas la chaîne, mais un objet, c'est pourquoi vous voyez le texte "[object HTMLInputElement]".

1

Ne compliquez pas trop votre code. Comme l'expression populaire va, rester simple

function isPalindrome(str) { 
 
    var backwards = str.split('').reverse().join(''); 
 
    return str === backwards; 
 
} 
 

 
// commented next line for snippet 
 
// document.addEventListener("DOMContentLoaded", function (e) { 
 
    document.getElementById("checkInput").addEventListener(
 
     "click", 
 
     function (e) { 
 
      var str = document.getElementById("str").value; 
 
      if (str.length > 10) return alert('Too long, max length is 10'); 
 
      if (str.length < 1) return alert('Too short, min length is 1'); 
 
      if (isPalindrome(str)) return alert('Is a palindrome'); 
 
      alert('Not a palindrome'); 
 
     } 
 
    ); 
 
// commented next line for snippet 
 
// }); 
 

 

 
// alert -> console.log for snippet 
 
function alert() { 
 
    console.log.apply(console, arguments); 
 
}
<h1>Is it a Palindrome?</h1> 
 
<div id="mainCont"> 
 
    <p>Hello. Please enter a word, and I'll see if it is a palindrome.</p> 
 
    <p>Word: 
 
     <input type="text" id="str" name="string" /> 
 
     <button id="checkInput">Submit</button> 
 
    </p> 
 
</div>


méthode inverse malheureusement n'est pas autorisé. et je dois utiliser une fonction de rappel

function reverse(str) { 
 
    var s = '', i = str.length; 
 
    while (i-- > 0) s += str.charAt(i); 
 
    return s; 
 
} 
 

 
function isPalindrome(str, callback_yes, callback_no) { 
 
    if (str === reverse(str)) { 
 
     callback_yes(str); 
 
    } else { 
 
     callback_no(str); 
 
    } 
 
} 
 

 
var yes = alert.bind(null, 'Yay'), 
 
    no = alert.bind(null, 'Nay'); 
 

 
// commented next line for snippet 
 
// document.addEventListener("DOMContentLoaded", function (e) { 
 
    document.getElementById("checkInput").addEventListener(
 
     "click", 
 
     function (e) { 
 
      var str = document.getElementById("str").value; 
 
      if (str.length > 10) return alert('Too long, max length is 10'); 
 
      if (str.length < 1) return alert('Too short, min length is 1'); 
 
      isPalindrome(str, yes, no); 
 
     } 
 
    ); 
 
// commented next line for snippet 
 
// }); 
 

 

 
// alert -> console.log for snippet 
 
function alert() { 
 
    console.log.apply(console, arguments); 
 
}
<h1>Is it a Palindrome?</h1> 
 
<div id="mainCont"> 
 
    <p>Hello. Please enter a word, and I'll see if it is a palindrome.</p> 
 
    <p>Word: 
 
     <input type="text" id="str" name="string" /> 
 
     <button id="checkInput">Submit</button> 
 
    </p> 
 
</div>

+0

malheureusement la méthode inverse n'est pas autorisée. et je dois utiliser une fonction de rappel. – user1776479

+0

@ user1776479 OK, j'ai résumé la méthode 'reverse' et j'ai écrit le test d'une manière callback-y. J'espère que tu fais bien tes devoirs –