Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,154,673 members, 7,823,901 topics. Date: Friday, 10 May 2024 at 05:49 PM

Javascript,html Help - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Javascript,html Help (1046 Views)

Tarot Website I Cooked With JavaScript,HTML / Quadratic Equations Calculator Made With Javascript, HTML And CSS / After 10days Of Coding With Html, Css And Javascript Forum4africa Is Ready (2) (3) (4)

(1) (Reply) (Go Down)

Javascript,html Help by kaykay100(f): 11:25pm On Mar 03, 2019
I am new to coding and I am working on this exercise. I am writing program to check whether an integer is Armstrong number or not. Example: 371 is an Armstrong number since 3 * * 3 + 7 * *3 + 1 * * 3 = 371. Almost done but need to be able to have the following.

1- a div to display the result. If the number is not a 3 digit integer, the button should be deactivated and if the user tries to click on it while deactivated, a message should appear explaining why the button can’t be clicked. 2. A div to display the result

So far I have been a screen alert to make sure I see my function is working fine. Which it is but need to sort out these 2 mentioned above.

Here is my code;

javascript

function Armstrong()
{
var flag,number,remainder,addition = 0;
number = Number(document.getElementById("inputnum"wink.value);
btn = document.getElementById("checkbtn"wink;

btn.disabled = true;

number.onkeyup = () => {
if ( number.length === 3) {
btn.disabled = false;
} else {
btn.disabled = true;
}
}
flag = number;
while(number > 0)
{
remainder = number%10;
addition = addition + remainder*remainder*remainder;
number = parseInt(number/10);
}

if(addition == flag)
{
window.alert("-The inputed number is Armstrong"wink;
}
else
{
window.alert("-The inputed number is not Armstrong"wink;
}
}
-- HTML---

<html>
<body>
<center><h1>The Armstrong Detector App</h1>

Enter your value: <input id="inputnum" type="text" class="input" >
<center><button onclick="Armstrong()" class="button" id="checkbtn" >Check</button>
<br />
</body>
</html>
Re: Javascript,html Help by stanliwise(m): 2:36am On Mar 04, 2019 

<!Doctyle html>
<html>
<body>
	<!-- <center> is deprecated, learn how to center <div> -->
   <center>
      <h1>The Armstrong Detector App</h1>
		Enter your value:  <br/>
		<input id="inputnum" type="text" class="input">
		<button class="button" id="checkbtn" >Check</button>
	</center>
	<script>
		//All event listener should not be in a function
		//All data collated shouldn't be in a function 
		
		//initialize
		var number, btn; 
		
		//data
		//document.getElementById("inputnun"wink.value is wrong
		//because number.keyup() wouldn't work
		number = document.getElementById("inputnum"wink;
		btn = document.getElementById("checkbtn"wink;
		btn.disabled = true;

		//events
		number.onkeyup = () => {
			if (number.value.length === 3) {
    			btn.disabled = false;
			} else {
    			btn.disabled = true;
			}
		}
		
		//inline method of onclick event handler for check button
		btn.onclick = () =>{
			Armstrong(number.value);
		}
		
		//Armstrong function should be free
		//of events and inputs
		//it should collect one argument
		//Warning: window.alert() shouldn't be ther
		//I left it for convenience 
		function Armstrong(number){
			var flag,remainder,addition = 0;
    		flag = number;
    		while( number > 0 ){
				remainder = number % 10;
       		addition += remainder * remainder * remainder;
       		number = parseInt( number/10 );
    		}

			if(addition == flag){
    			window.alert("-The inputed number is Armstrong"wink;
			}else {    
        		window.alert("-The inputed number is not Armstrong"wink;
			}
		}
	</script>
</body>
</html>

Note: Quote me to properly copy my code if possible

Your code have many errors and I don't have the time for review I want to sleep.
1. You called an event inside a function . This is totally wrong.

2. You tried using number the event number.onkeyup() which would never work because number is not an object since you have already assign number with document.getElementById(...).value instead of simply document.getElementById(...)

2. Armstrong function is not responsible for collecting data from div elements, all it needed was just an input

3. Always use inline event handler rather than the traditional html event hanldler <html onclick = function(...) >

4. <center> tag is deprecated.

5. Your html code doesn't begin with <!Doctype html>

6.You didn't document complicated part of your code,

1 Like

Re: Javascript,html Help by stanliwise(m): 2:59am On Mar 04, 2019
kaykay100:
I am new to coding and I am working on this exercise. I am writing program to check whether an integer is Armstrong number or not. Example: 371 is an Armstrong number since 3 * * 3 + 7 * *3 + 1 * * 3 = 371. Almost done but need to be able to have the following.

1- a div to display the result. If the number is not a 3 digit integer, the button should be deactivated and if the user tries to click on it while deactivated, a message should appear explaining why the button can’t be clicked. 2. A div to display the result

So far I have been a screen alert to make sure I see my function is working fine. Which it is but need to sort out these 2 mentioned above.

Here is my code;
.....................
Above is the solution.

1 Like

Re: Javascript,html Help by stanliwise(m): 8:53pm On Mar 04, 2019
kaykay100:
I am new to coding and I am working on this exercise. I am writing program to check whether an integer is Armstrong number or not. Example: 371 is an Armstrong number since 3 * * 3 + 7 * *3 + 1 * * 3 = 371. Almost done but need to be able to have the following.
" >Check</button>
<br />
</body>
</html>
Did it work??

1 Like

Re: Javascript,html Help by kaykay100(f): 8:55pm On Mar 05, 2019
Thank you much for breaking it down more. Nairaland did not give ma a notification that someone answered my question ,I am truely sorry for the late reply.

I ran the code but when i click the button it does not work BECAUSE the function has not been called anywhere in the HTML code.
Below is the code;

<--- HTML--->
<html>
<body>
<center>
<h1>The Armstrong Detector App</h1>
Enter your value: <br/>
<input id="inputnum" type="text" class="input">
<button class="button" id="checkbtn" >Check</button>
</center>

</body>
</html>


<---- JAVASCRIPT--->
function Armstrong(number){
var flag,remainder,addition = 0;
flag = number;
while( number > 0 ){
remainder = number % 10;
addition += remainder * remainder * remainder;
number = parseInt( number/10 );
}

if(addition == flag){
window.alert("-The inputed number is Armstrong"wink;
}else {
window.alert("-The inputed number is not Armstrong"wink;
}
}
Re: Javascript,html Help by kaykay100(f): 9:08pm On Mar 05, 2019
stanliwise:

Did it work??

Yes it did work ,thank you so much . Here is the code. But the only thing that is not working is ,when the user clicks the "disabled" button. There should a message telling them they should enter 3 digits. How do I do that?

var number, btn;
number = document.getElementById("inputnum"wink;
btn = document.getElementById("checkbtn"wink;
btn.disabled = true;
//events
number.onkeyup = () => {
if (number.value.length === 3) {
btn.disabled = false;
} else {
btn.disabled = true;
}
}

//inline method of onclick event handler for check button
btn.onclick = () =>{
Armstrong(number.value);
}
function Armstrong(number){
var flag,remainder,addition = 0;
flag = number;
while( number > 0 ){
remainder = number % 10;
addition += remainder * remainder * remainder;
number = parseInt( number/10 );
}

if(addition == flag){
window.alert("-The inputed number is Armstrong"wink;
}else {
window.alert("-The inputed number is not Armstrong"wink;
}
}
Re: Javascript,html Help by stanliwise(m): 11:48pm On Mar 05, 2019
kaykay100:


Yes it did work ,thank you so much . Here is the code. But the only thing that is not working is ,when the user clicks the "disabled" button. There should a message telling them they should enter 3 digits. How do I do that?

var number, btn;
number = document.getElementById("inputnum"wink;
btn = document.getElementById("checkbtn"wink;
btn.disabled = true;
//events
number.onkeyup = () => {
if (number.value.length === 3) {
btn.disabled = false;
} else {
btn.disabled = true;
}
}

//inline method of onclick event handler for check button
btn.onclick = () =>{
Armstrong(number.value);
}
function Armstrong(number){
var flag,remainder,addition = 0;
flag = number;
while( number > 0 ){
remainder = number % 10;
addition += remainder * remainder * remainder;
number = parseInt( number/10 );
}

if(addition == flag){
window.alert("-The inputed number is Armstrong"wink;
}else {
window.alert("-The inputed number is not Armstrong"wink;
}
}
figured out that your self.
the onclick event function should check the value length of the input and make the appropriate response.
Re: Javascript,html Help by kaykay100(f): 12:18am On Mar 06, 2019
stanliwise:
figured out that your self.
the onclick event function should check the value length of the input and make the appropriate response.

Sure,thanks a great deal once again . I understand a lot of tech people don't like to teach all the way ,so for me I appreciate the way you have broken it down for me as a newbie. I understand the concept better.

For me the learning continues.
Re: Javascript,html Help by stanliwise(m): 12:23am On Mar 06, 2019
kaykay100:


Sure,thanks a great deal once again . I understand a lot of tech people don't like to teach all the way ,so for me I appreciate the way you have broken it down for me as a newbie. I understand the concept better.

For me the learning continues.
I am glad you're ready to learn. I would help as much as I can.

(1) (Reply)

Net Framework Issue / What Is The Major Difference Between SQL And Mysql? Can They Be Used Interchange / Vb.net For Dummies:

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 31
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.