Html Question posted in
Some basic documentation can be found here.

HTML DOM: Can't edit element value programmatically

I am trying to automate few tasks on some websites, including Google Finance. But, when I try to edit the input value in Google Finance Search Input, it simply doesn’t work. Is there anyone who can help me out with this?

I have already tried the following code in console:


element = document.querySelector("input[class='yNVtPc ZAGvjd Ny5lGc']")
element.value = "RELIANCE"
element2 = document.querySelector("input[class='Ax4B8 ZAGvjd']")
element2.value = "RELIANCE"

I even tried removing disabled attribute and changing default value, still no luck.

Furthermore, I tried the following function as well:

const sendKeys = async (el, str) => {
    let val = "";
    const keys = str.split("");
    for (const key of keys) {
      console.log(key);
      val += key;
      el.dispatchEvent(
        new KeyboardEvent("keydown", { bubbles: true, cancelable: true, key })
      );
      
      el.dispatchEvent(
        new KeyboardEvent("keypress", { bubbles: true, cancelable: true, key })
      );
      
      el.value = val;
      
      el.dispatchEvent(new Event("input", { bubbles: true }));
      
      el.dispatchEvent(new Event("change", { bubbles: true }));
      
      el.dispatchEvent(
        new KeyboardEvent("keyup", { bubbles: true, cancelable: true, key })
      );
      
    }
    return true;
  };

But, even this one also doesn’t work.
Is there any solution or workaround so as I can type the text to that input field programmatically?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Special thanks to Meijing Xue for sharing with me the that Google Finance is having multiple input tags, and with querySelectorAll, element value can be set.

    After digging in, I discovered that in actual there are only two input elements with two duplicate elements, one each.

    Solution:

    function performPressKeyAction(element) {
  // Find the element using the provided selector
  if (element) {
    // If the element is found, create a KeyboardEvent for pressing Enter
    const enterEvent = new KeyboardEvent("keydown", {
      key: "Enter",
      code: "Enter",
      keyCode: 13,
      which: 13,
      bubbles: true
    });

    // Dispatch the created KeyboardEvent on the element
    element.dispatchEvent(enterEvent);
    console.log("1");
  } else {
    // Log an error if the element is not found
    console.error("Element not found for selector:", element);
  }
}
async function sleep(milliseconds) {
    return await new Promise((r, _) => {
        setTimeout(() => {
            r();
        }, milliseconds);
    });
}

const sendKeys = async (el, str) => {
    let val = "";
    const keys = str.split("");
    for (const key of keys) {
      console.log(key);
      val += key;
      el.dispatchEvent(
        new KeyboardEvent("keydown", { bubbles: true, cancelable: true, key })
      );
      await sleep(200);
      el.dispatchEvent(
        new KeyboardEvent("keypress", { bubbles: true, cancelable: true, key })
      );
      await sleep(200);
      el.value = val;
      await sleep(200);
      el.dispatchEvent(new Event("input", { bubbles: true }));
      await sleep(200);
      el.dispatchEvent(new Event("change", { bubbles: true }));
      await sleep(200);
      el.dispatchEvent(
        new KeyboardEvent("keyup", { bubbles: true, cancelable: true, key })
      );
      await sleep(200);
    }
    return true;
  };

var element = document.querySelectorAll("input[class='Ax4B8 ZAGvjd']");

// then try to enter value and hit click for element of that particular class [one of them is duplicate element for both kinda elements]

element.forEach(e => {
  sendKeys(e, "RELIANCE")
});

// Run this only after the keys have been typed
element.forEach(e => {
    performPressKeyAction(e)
});

    Thanks again, Meijing bro :)


  2. 0

    I’ve tried just now, there are 4 Input tag in https://www.google.com/finance/ page, when i use single querySelector and set value, nothing changed.
    But when i change to querySelectorAll, it works

    var elements = document.querySelectorAll("input");
[...elements].map(i => i.value = 'RELIANCE');

    But it still makes me weird, single querySelector works in normal pages, maybe google changed getters and setters or something stuff

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search