I know the rules probably don’t allow help but I thought I would try, making sure to be limited in code shared and be vague. Particularly since there is chance they may be a problem may not come from me or be me not understand how the webpage works.
For clarity I have still got a long way to go to complete the project.
The problem seems to act the same whether I have pressed the check button or not or written text in the input box or not, program execution appears the same. For clarity I am not asking for help on interaction between these two. I included console.log() commands in program to help me understand it and whether changes are successful. I will reveal ‘console.log(textInput.value);’ outputs a blank line regardless. While ‘console.log(checkButton);’ outputs ‘{}’ regardless.
In the project there is a javaScript document call, button and input commands in the html part and html command calls in the javaScript part, among many other commands. I am being deliberately non-specific here.
<!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">
</head>
<body>
<main>
<p>Enter text to see if it is a palindrome.</p>
<input id="text-input">
<button id="check-btn">
Check
</button>
<div id="result"></div>
</main>
<script src="./script.js">
</script>
</body>
</html>
javaScript
let textInput=document?.getElementById('text-input');
let checkButton=document?.getElementById('check-btn');
let output=document?.getElementById(result);
console.log(textInput.value); //first console.log
console.log(checkButton); //second console.log
let checkButtonClicked=false;
checkButton?.addEventListener("click", () => {
checkButtonClicked===true;
})
console.log(checkButtonClicked); //third console.log
if (checkButtonClicked===true&&textInput===null){
alert("Please input a value");
}
for (let i in textInput){
//console.log(i);
}
Does that work. For clarity the css tab is blank also in addition parts of code in addition to console.log command are not going to be in the final version just there for now.
I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
For clarity one more false is outputed below the third {} that cannot be seen in the print screen. Let me know if I have provided what you need even if not in best way.
I’m confused by the amount of logic you have in the global space? All of your logic should be inside the function that runs when the button is clicked.
Yes this is change I probably have to make stacking functions have never been my strong point it has not been my strong point. I possibly need to do some training outside the main course on this.
I might mean Functional programming but I don’t have the knowledge to be sure. What I referring is (user created) functions calling other (user created) functions particularly when you getting to level of complexity of for example the ‘create a role playing game lab’. I am in my comfort zone and way my brain more thinks, to use functions more minimally. I happy to say more if requested.
You definitely don’t need Functional Programming or multiple functions to accomplish this. But your logic does need to be in a function that is called when the button is clicked.
If you can remember back to my post about javaScripts style of programming and me thinking javaScript potentially being object orientated programming was the issue. It has since become clear that my problem was the number of functions in the programs and the complex interactions between them. This is a non-language specific problem. I have been thinking of working out or asking how to improve my comfortability with function heavy programming (let me know if I am referring to functional programming). Any help on this is much appreciated.
Sorta? You do not have to use a bunch of small functions if you don’t want to, but understanding the basic idea of functions and when to use them is pretty critical to writing code.
Let park the greater topic for now. Back to the project in question do I need to make greater progress on the program before you can work out how to help. I have make a bit more progress since sent my code.
I still need help. I thought of creating a new post but decided it best to just continue with this one. This comment should stand alone with no need to read the other ones.
I look for help to make the code I have done so far work. More specifically have the output of the program change based on whether the check button has been pressed and whether text has included in the text box, when clicking the check button. My code so far is included below, note my CSS file is empty hence it not being included. Please note parts of JavaScript program are included for debugging purposes and will not be in the final version.
<!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">
</head>
<body>
<main>
<p>Enter text to see if it is a palindrome.</p>
<input id="text-input" type="text">
<button id="check-btn">
Check
</button>
<div id="result"></div>
</main>
<script src="script.js"></script>
</body>
</html>
JavaScript
let textInput=document?.getElementById('text-input');
let checkButton=document?.getElementById('check-btn');
let output=document?.getElementById(result);
console.log(textInput.value); //first console.log test
console.log(checkButton); //second console.log test
let checkButtonClicked=false;
checkButton?.addEventListener("click", () => {
checkButtonClicked===true;
})
console.log(checkButtonClicked); //third console.log test
if (checkButtonClicked===true&&textInput===null){
alert("Please input a value");
}
for (let i in textInput.value){
console.log(i); //fourth console.log test
}
