Like was said above, this still all absolutely must be in a function that is triggered when the button is clicked.
1 Like
This did not come across clearly to me particularly after ILM said only one function was necessary and program already had one. However I did read them implying the function they were referring to was not already in the program but it could have been for code not already included.
Looks like I did read ILM message properly. I think it also got confused by neither bring up their is a way to do this project without addEventListener() and this neccesary to do the project in one function.
If not already clear I know the alternate command but I opted to not say not knowing the rules.
You need to put your actual execution logic into a function that gets called when the button is clicked. There is no way to accomplish this project without doing that.
As mentioned above, the logic absolutely must be in a function that is executed when the button is clicked.
2 Likes
I have made progress but the program does not seem to register when the text box is non empty. I tried a number of approaches without success.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="styles.css" type="text">
</head>
<body>
<main>
<p>Enter text to see if it is a palindrome.</p>
<input id="text-input" type=>
<button id="check-btn">
Check
</button>
<div id="result"></div>
</main>
<script src="script.js"></script>
</body>
</html>
javaScript
let textInputContent=document?.getElementById('text-input').value;
let checkButton=document?.getElementById('check-btn');
let output=document?.getElementById(result);
let checkButtonClicked=false;//proably remove this in due course
function palindromeCheck(){
//Parts of program to likely ulimately remove
console.log(textInputContent); //first console.log test
console.log(checkButton); //second console.log test
checkButtonClicked=true;
console.log(checkButtonClicked); //third console.log test
//main function starts here
if (textInputContent===""){
alert("Please input a value");
}
for (let i in textInputContent.value){
console.log(i); //fourth console.log test
}
}
checkButton.addEventListener("click", palindromeCheck() )
Two side points you will note my change the first line I have been constantly changing my mind on whether to call the value attribute at the start. It there a best practice. Finally short of commenting the alert command out is there a way to prevent the program running every time a character is changed. As this case having a error message I have to click off, each time is annoying and slows me down.
Can you think about why looking for a value in this element is a bad idea in the global scope? Could that be why your alert is triggering every time you click the button?
1 Like
Tried it in the function prior to my previous message, no difference.
However I have moved it back into the function. As I had already had your thought I moved it back as there was no change and Jeremy potentially indicated in a previous message (the first one yesterday) it should not be in function.
For clarity I realise the “type=” error afterwards confused why there would be no error message. Problem exist with it removed or type=“text”.
@JeremyLT did not say or imply that you should not look for the #text-input value inside the function.
Sorry misunderstood your comment. On Jeremy point that is why I put potentially in inverted commas I was very unsure.
Sorry I entered it as inverted commas forget it did not show as that.
I have realised I am unclear what you saying in this comment. Are you suggesting I should call the value instead the function having called the element in the global scope.
I suspect this does not quite work as yo expect. Here you should pass a function, not a function call.
1 Like
This solve it. Thankyou to you, ILM and fcc4b6d10c4-b540-4e2, I will hold off ticking solution until I have completed the project. Sorry for any annoyance I caused.
Still something I do not know, can you point to where in the course (responsive web design) we are taught the quick way to remove all non alpha-numeric values from strings. I say it this way as it should be in the course, I probably just do not know where to look either that or I have probably got the wrong end of the stick.
we are not taught that in the responsive web design course, it doesn’t deal with strings
you should follow the full stack curriculum
That appeared to me to be required for this certification project. Obviously I am wrong, so how do you complete the project then, remove each non-alphanumeric character included in test inputs individually even though, it implies removing every one.