We Keep Coding

Accessing & Manipulating DOM for JS Module

I'm new to importing modules in ES6. I have a simple module with a function for creating and appending an HTML element.
I am able to call and pass arguments to the function, however, I cannot read any properties from the DOM. I am receiving errors such as this:
Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
I have simplified my code below:
main.js
import * as watm_fn from "./modules/functions.js";
document.addEventListener("DOMContentLoaded", function (event) {
watm_fn.createToggle("#container");
}
functions.js
export function createToggle(elm) {
const toggleElementID = document.getElementById(elm);
const languageToggle = document.createElement("select");
toggleElementID.parentNode.replaceChild(languageToggle, toggleElementID);
}
I get a similar error when trying to return the innerHTML of toggleElementID
Is accessing and manipulating the DOM via an imported module possible? And if so, what am I doing wrong?
(I am not using node or jquery in this project)

Well I feel dumb. I'm used to coding in jQuery where you include the "#" in front of your IDs, but I forgot that getElementById does not require that. Removing that from my passed argument resolved the issue.

Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
This error suggests that the below line is failing toggleElementID is null:
toggleElementID.parentNode.replaceChild(languageToggle, elm);
Why is toggleElementID null ?
Look at the code searching for the element
const toggleElementID = document.getElementById(elm);
As per getElementById
An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.
So there is no matching element found with the supplied elm id.

Getting currentScript is returning typeError

I'm trying to get a custom attribute that I put on my script tag:
<script type="text/javascript" src="https://.../mysource.js" customdata="some_value"></script>
I'm using the following code so it will work on IE:
document.currentScript =
document.currentScript ||
(function () {
const field = document.getElementsByTagName('script');
return field[field.length - 1];
})();
// document.currentScript.getAttribute('customdata');
But then I'm receving the following error when I try to set a new value on document.currentScript.
Uncaught TypeError: Cannot set property currentScript of # < Document > which has only a getter
I only solve this when I'm using document.currentScript directly, but then I can't use on older browsers.

If document.currentScript exists, it's a read-only property. So only try to set it if it doesn't exist.
if (!document.currentScript) {
document.currentScript = (function() {
const field = document.getElementsByTagName('script');
return field[field.length - 1];
})();
}

I created another variable to hold the value from document and then it worked and no errors is shown.

Replacing JQuery .val() with JS .value

I'm going through some legacy code on a submission form and replacing JQuery w/ vanilla JS.
Right now, I have this function that uses .val() (JQuery) to grab the value for an undefined input:
myFunction: function(){
var subscription = $('input[name="subscription_id"]').val();
// Do something with subscription
}
When I run the code in my browser, I get no issues - the code is meant to work only if a subscription is passed into the input - if it's not there, we just get an undefined value. The value returned by the JQuery combo of $() and .val() console logs to 'undefined'.
When I replace the JQuery with vanilla JS, like so:
myFunction: function(){
var subscription = document.querySelector('input[name="subscription_id"]').value;
// Do something with subscription
}
And then try to run my form, I get the following error in the console:
Uncaught TypeError: Cannot read property 'value' of null
Why is this happening? And is there a workaround for this? Any help is appreciated. Thanks in advance.

This happens because
document.querySelector('input[name="subscription_id"]')
does not exist. For vanilla js, you need to check if it exists first, then get the value if it does. jQuery has a silent fail for this.
var element = document.querySelector('input[name="subscription_id"]');
// If it exists, return its value, or null
var subscription = element ? element.value : null;

Just use a condition:
var elem = document.querySelector('input[name="subscription_id"]');
var subscription = elem ? elem.value : "";

how to get/set TestStep's property value using javascript in soapUI?

i have tried using Groovy script.
the following code is to set property value using roovy script:
testRunner.testCase.testSuite.testCases[testCaseName].testSteps[testStepName].setPropertyValue("request",object);
"request" is a property of testStep.
object is a some value.
when i try above code in javascript but i got following error:
org.mozilla.javascript.ecmaerror: TypeErro: org.mozilla.javascript.ecmaerror Cannot read property "testSteps" from undefined.
So please tell me how to use in using javascript?

hurra, i got solution. Please see following code:
var project = testRunner.getTestCase().getTestSuite().getProject();
var testSuite = project.getTestSuiteByName("TestSuite");
var testCasesItr=testSuite.getTestCaseList().iterator();
while(testCasesItr.hasNext())
{
var testStepsItr = testCasesItr.getTestStepList().iterator();
while(testStepsItr.hasNext()){
var testStep = testStepsItr.next();
log.info(testStep.getPropertyValue("response"));
// here you can set property
// testStep.setPropertyValue("request","someValue");
}
}
above code will run for all the testcases.

Overriding appendChild()

I am trying to override appendChild method so that I can have control over dynamically created elements and modify them if needed before inserting into the page. I tried with this example code, just to see if it could be done:
var f = Element.prototype.appendChild;
Element.prototype.appendChild = function(){f.apply(this, arguments); };
and it works for simple examples.However, when I try to load jquery after this code:
<script>
var f = Element.prototype.appendChild;
Element.prototype.appendChild = function(){f.apply(this, arguments); };
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
I get this errors:
Uncaught TypeError: Cannot read property 'selected' of undefined jquery.min.js:4
Uncaught TypeError: Cannot read property 'appendChild' of undefined
So, why it doesn't work with jquery ? Is there a safe way to override appendChild ?

It is ill advised to overwrite native functions, but if you do it than make sure you return the appended element as well to prevent problems with code that uses the returned value of the native "appendChild" function:
window.callbackFunc = function(elem, args) {
// write some logic here
}
window.f = Element.prototype.appendChild;
Element.prototype.appendChild = function() {
window.callbackFunc.call(this, arguments);
return window.f.apply(this, arguments);
};