How to link input from HTML text field to Javascript

How to link input from HTML text field to Javascript
0

#1

Hello guys,
I’m trying to link the input from my HTML text field to my Javascript function argument.
This is my code so far:

javascript code:

function checkNum(num) {
  let ascend = num.toString().split('').sort(function(a, b){return a-b}).join('');
  let descend = num.toString().split('').sort(function(a, b){return b-a}).join('');
  let result = descend - ascend;
  return result;
}
 function Kaprekar(num) {
   
var count = 0;
let reverseNum = num.toString().split('').reverse().join('');
  let n  = num.toString();
  while (num !== 6174 && num !==0 && num >= 1000 && num < 10000 && n !== reverseNum) {
   num = checkNum(num);
    count += 1;
  }
  document.getElementById("txtresult").value = count;
   
}

let Kaprekar(num) = parseInt(document.getElementById("Text1").value);

my HTML code:

<div id = "main">
  <input type="text"  id="Text1" value="" name="TextBox1">
  <p>Click the button to count</p>
  
  <button  onclick="Kaprekar(num)">Check</button>
  <div id >
    <input type="text" id="txtresult" name="TextBox3">
  </div> 
</div>

I want to call Kaprekar (num) from the html input text field. i have tried " let Kaprekar(num) = parseInt(document.getElementById(“Text1”).value);
". but its not working


#2

I’ve edited your post for readability. 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 easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


#4

Just specify the onclick attribute’s value like the following:

<button  onclick="Kaprekar()">Check</button>

then inside your Kaprekar function, you can create a variable to capture the value in the input with id=“Text1” like:

const textBox1Val = Number(document.getElementById('Text1').value);

Then you can use textBox1Val however you want in the rest of the function. I am not sure what the ultimate goal of the Kaprekar function is, but at least you have a value to work with now.


#5

The goal of my Kapreka function is to take a non-consecutive four-digit number and do descend and ascend, subtract ascend from descend with the aid of the checkNum (). if the result is not equal to 6174, the operation start again until final result is 6174. The number of count is displayed.
but my issue is, i want to input the argument in kapreka which will a be number from html text input.


#6

I have already explained how you would access the value in the input box. What part of my explanation do you not understand how to implement?


#8

do you mean i should specify the “onclick” attribute to the text input?


#9

If you want the value of the input box to remain a string, then remove the part where called the Number function on it.

const textBox1Val = document.getElementById('Text1').value

#10

The onclick should be on the button like you have it. The difference is the value of the onclick event should be Kaprekar() and not Kaprekar(num), because num as not value before the button click to be able to pass to Kaprekar.


#11

the function of the button is just to perform Kapreka() operation when you input a value in the text input area.
you can check my codepen: https://codepen.io/Benony/pen/zJLrRx


#12

The following line is not going to be useful, because when the page loads, it references the input with id=“Text1”, but the input only has an empty string as a value when the page first loads. It only will have a value once you click the button.

Kaprekar(num = parseInt(document.getElementById("Text1").value));

I already told you to put the reference to document.getElementById(‘Text1’).value inside the Kaprekar function (see my original reply).

If you want to assign that value to a variable inside your function named num, then write the following inside your function, but change the onclick as I have already described.

let num = document.getElementById('Text1').value;

#13

Oh! i get what you meant now. Thank you so much
it worked