How do I use an HTML text box value as a JavaScript parameter or variable and call the JavaScript Function with the text box value?

Gregory Carlton 0
Viewed 33

I have a JavaScript function that works on its own, however, I am having difficulty getting it to function correctly inside of an HTML web page (no server backend). The function that works correctly by itself is:

function decodeUrlDefensev3(link) {
  var matches = link.match(new RegExp('v3/__(.+?)__;(.*?)!'))

  // love me a mutable array
  var decode_pile = Array.from(matches[1]);
  var chars_pile = Array.from(atob(matches[2])).reverse();

  for (var match of link.matchAll(/\*/g)) {
    decode_pile[match.index] = match.pop()
  }

  return decode_pile.join('')
}

var link = "https://urldefense.com/v3/__https://files.bitsight.com/e3t/Ctc/LR*113/c1NcF04/VWyThK1lvg49W724nRX2d04lQW1xTZ7Q4QfX7gN6fpSV75nCTJV3Zsc37CgZP4N95fbTLz6L-gW48j6gR3bC3zwW6L_GnH7kDhzMW9418Rb3hJ605W2HjF587SWBXyW8RmYtF6fgdWYW5XQmQn1bFttzW5qPlhD5h_TCqW4-gDCr8x7fD0N4M_DVGdxFD9W2T0jhF4j9YsWW7603Qw8dF3j7W36QBsz4RM6hNW6Hpcdy8Qtmw4W8y5VBz2TLWGhVTNFr45gN7FDW7m9S0M1tvjXNW7vLHnj2945hZW437Z0x5Vd_ZcW7MjgJC89gYB6W2Y3sH14zDDZvW39S6bT1pFgM2W8gn9pV4HdltbW3MTVMS59VlW-VBQkF74S69PWW5yn7jz6PhmVLW4sYpYl4yDVH4W3dkf3v6S141VW3Sqpcn7xkSPcW33N24p3R1FxPW3y04W03TWHN4N2wvRyC4j7X83p5G1__;Kw!!HhY5bxTJhQ!vdj_DUrp0JIWgTw61Vg8M1chEvhp0k7XlLFiomq0Wu1rCrze9dzn2inIIVKchdRRP6HqJshCEuIHCbwCa1ha0FPyFA$"

console.log(decodeUrlDefensev3(link))

Expected output:

https://files.bitsight.com/e3t/Ctc/LR*113/c1NcF04/VWyThK1lvg49W72*nRX2d04lQW1xTZ7Q4QfX7gN6fpSV75nCTJV3Zsc37CgZP4N95fbTLz6L-gW48j6gR3bC3zwW6L_GnH7kDhzMW9418Rb3hJ605W2HjF587SWBXyW8RmYtF6fgdWYW5XQmQn1bFttzW5qPlhD5h_TCqW4-gDCr8x7fD0N4M_DVGdxFD9W2T0jhF4j9YsWW7603Qw8dF3j7W36QBsz4RM6hNW6Hpcdy8Qtmw4W8y5VBz2TLWGhVTNFr45gN7FDW7m9S0M1tvjXNW7vLHnj2945hZW437Z0x5Vd_ZcW7MjgJC89gYB6W2Y3sH14zDDZvW39S6bT1pFgM2W8gn9pV4HdltbW3MTVMS59VlW-VBQkF74S69PWW5yn7jz6PhmVLW4sYpYl4yDVH4W3dkf3v6S141VW3Sqpcn7xkSPcW33N24p3R1FxPW3y04W03TWHN4N2wvRyC4j7X83p5G1

The above code will return a correctly decoded website URL in the console. This works for technical people however, I am trying to create a basic HTML with a text box for users to enter the encoded URL, click a button, then return the decoded URL on their screen.

Using the below code:

function decodeUrlDefensev3(link) {
  var matches = link.match(new RegExp('v3/__(.+?)__;(.*?)!'))

  // love me a mutable array
  var decode_pile = Array.from(matches[1]);
  var chars_pile = Array.from(atob(matches[2])).reverse();

  for (var match of link.matchAll(/\*/g)) {
    decode_pile[match.index] = match.pop()
  }

  return decode_pile.join('')
}

var link = document.getElementById('textbox1').value;

console.log(link)
<input type="text" id="textbox1" value="https://www.google.com" />
<input type="button" value="button1" onclick="decodeUrlDefensev3(link)" />
<input type="button" value="button2" onclick="function2()" />

The console.log(link) returns the true variable saved above. However, when I click the button, I get an error "Uncaught TypeError: Cannot read properties of null (reading '1')".

How do I pass the textbox input and properly call my function so that whatever is entered inside of textbox1 is parsed using my JavaScript function?

An example of what I am trying to do can be found here:https://jsfiddle.net/37phxda8/1/

I need to use my function above, not the function on that JS Fiddle.

javascript html
2 Answers

You aren't passing the parameter to the decodeurl function. Try it like this:

function decodeUrlDefensev3(link) {
    var matches = link.match(new RegExp('v3/__(.+?)__;(.*?)!'))

    // love me a mutable array
    var decode_pile = Array.from(matches[1]);
    var chars_pile = Array.from(atob(matches[2])).reverse();
    
    for (var match of link.matchAll(/\*/g)) {
        decode_pile[match.index] = match.pop()
    }

    return decode_pile.join('')
}

function handleClick() {
   var link = document.getElementById('textbox1').value;
   decodeUrlDefensev3(link);
}

Then in your html:


<input type="button" value="button1" onclick="handleClick()"/>
user3xcN0

The error is probably because there are no results from the link.match function (for "https://www.google.com"), let alone 3 [2nd and 3rd items of the result are used for decode_pile and chars_pile respectively]. You should either change the RegExp for the match or provide and error message like the commented if block in the edited code below.

Also, your function is not taking updated input from textbox1 - only the initial value of "https://www.google.com" set in html. You should retrieve it within the function like:

function decodeUrlDefensev3() {
    var link = document.getElementById('textbox1').value;
    var matches = link.match(new RegExp('v3/__(.+?)__;(.*?)!'))
    
    /*if (!matches || matches.length < 3) {
        alert("Invalid input, could not decode");
        return null;
    }*/

    // love me a mutable array
    var decode_pile = Array.from(matches[1]);
    var chars_pile = Array.from(atob(matches[2])).reverse();
    
    for (var match of link.matchAll(/\*/g)) {
        decode_pile[match.index] = match.pop()
    }

    return decode_pile.join('')
}

And then your HTML for the button can simply be:

<input type="button" value="button1" onclick="decodeUrlDefensev3()"/>
Driftr950
Related