How do i resolve "Cannot read properties of undefined (reading 'ownerDocument')" - javascript

I am trying to add a div inside the main div on page loading, it works when i write the code like this:
function DivAdder() {
$('#mainDiv').append('<div class="newspaper-wrapper"></div>');
}
DivAdder();
window.onload = DivAdder;
But i want to make this function have a parameter so i can just pass its name instead of writing the whole string in .append function. I wrote something like this but i am having the error from the title:
function DivAdder(variable) {
$('#mainDiv').append($(variable));
}
DivAdder('<div class="newspaper_wrapper"></div>');
window.onload = DivAdder;
And i tried this as well:
$('#mainDiv').append(variable);
But nothing happens. I read some documentation but was not successful.
Appreciate the help <3 .

This is because window.onload passes an Event object as first argument. If you console.log(variable), it will tell you it's an Event.
You need to keep this first argument as an optional event, and pass your HTML as second argument :
function DivAdder($event, html) {
console.log("Event = ", $event)
console.log("Adding div : " , html)
$('#mainDiv').append(html);
}
DivAdder(null, '<div class="newspaper_wrapper">TEST</div>');
window.onload = DivAdder; // This will call DivAdder( LoadEvent )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainDiv"></div>
I'm not sure why you're assigning window.onload = DivAdder in the first place, since this won't add any HTML and won't do anything at all. You can get rid of it completely, it's only causing trouble.
function DivAdder(html) {
console.log("Adding div : " , html)
$('#mainDiv').append(html);
}
DivAdder('<div class="newspaper_wrapper">TEST</div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainDiv"></div>

Related

Uncaught TypeError: Cannot read property 'add' of undefined on localhost - Wordpress

I want to add a class in a div but that is not working.
PHP - JS
function wpb_hook_javascript() {
if (is_page ('50')) {
?>
<script type="text/javascript">
// your javscript code goes here
window.addEventListener("load", ()=>{
console.log("HELLO");
document.getElementById("all-categories").classList.add("mystyle");
});
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
HTML
<div class="dropdown-categories collapse " id="all-categories">
DEVTOOLS
Have you tried splitting this line
document.getElementById("all-categories").classList.add("mystyle");
Into two lines to confirm the element exists, it's only one element, and has classList property?
var categories = document.getElementById("all-categories");
console.log(categories);
console.log(categories.classList); // I suspect this is undefined, thus .add() function doesn't exists
categories.classList.add("mystyle");

Get ID of div created by jquery

I have two functions, where the first creates a div in the dom and the second gets the ID via getElementById(). Unfortunately, my second function is just returning null.
I looked in using $.Deffered() in either of my functions, but alas nothing I do seems to work
function one() {
var dynamicDiv = $("<div>").attr("id", 'test');
dynamicDiv.iziModal({
//modal content here
})
}
function two() {
var container = document.getElementById('test');
console.log(container.innerHTML); //not returning any data
}
enter code here
I had hoped to use this with a library that replaces images with a canvas object, but it requires that the "parent element to be a valid DOM Element". I have been searching for a while now, but I can not seem to find anything on the subject that is applicable.
** Edit**
Thank you for pointing out the error in my id (I had tried something else before I pasted). The iziModal function (http://izimodal.marcelodolza.com/) is currently pulling the content in via ajax (which I assume is the problem here):
The iziModal Function:
dynamicDiv.iziModal({
title: '',
autoOpen: 1,
width: 500,
onOpening: function (offer) {
offer.startLoading();
$.get(demoUrl, function (data) {
$('#' + id + " .iziModal-content").html(data);
offer.stopLoading();
});
}
});
Content of the other file:
<div id="test">
<img src="./bundle/images/coupon.jpg" />
</div>
function one() {
var dynamicDiv = $("<div>").attr("id", 'test');
dynamicDiv.iziModal({
//modal content here
});
$("body").append(dynamicDiv);
}

Migrate onClick from HTML to Javascript file

In my HTML, this works
<div id="portfolio1" onclick="changeMainFrame('lib/portfolio1.html')">
to trigger the following function:
function changeMainFrame(srcURL){
var target = document.getElementById("mainFrame");
target.src = srcURL;
}
I want to migrate it to my javascript doc. But this does not work:
document.getElementById("portfolio1").onclick = changeMainFrame("lib/portfolio1.html");
I can not find out how to fix this. Any hints? Cannot find a similar situation anywhere for something so simple yet time consuming.
document.getElementById("portfolio1").onclick = function() {
changeMainFrame("lib/portfolio1.html");
}
You're calling the function changeMainFrame. What you want to do is supply a function wrapper.
document.getElementById("portfolio1").onclick = function() {
changeMainFrame("lib/portfolio1.html");
}
function changeMainFrame(txt) {
alert(txt);
}
<div id="portfolio1">Click Me</div>
You need to assign a function to document.getElementById("portfolio1").onclick which will be called when that element gets clicked. The problem is that instead of assigning a function, you assigned the result of invoking/calling that function. What you can do instead is provide a function in which inside it you call changeMainFrame:
document.getElementById("portfolio1").onclick = function() {
changeMainFrame("lib/portfolio1.html");
};
You need to either use .onclick or the onclick attribute. Both of them require a handler function, and what you were passing was just the result of running your changeMainFrame function (null). Wrapping it in a function() { } yields your expected result.
function changeMainFrame(srcURL){
var target = document.getElementById("mainFrame");
target.src = srcURL;
}
document.getElementById("portfolio1").onclick = function(){changeMainFrame('https://codepen.io')}
<div id="portfolio1">go to codepen.io</div>
<iframe id="mainFrame" src="https://example.com"></iframe>

Javascript pass parameter to function

i try to pass paramater to function. When i click the div it will alert the paramater that i pass
i have 2 file
index.html
script.js
here's what i try
Example 1
index.html
<div id="thediv" >
script.js
window.onload = initialize;
//bind event listener
function initialize(){
document.getElementById("thediv").onclick = myFunction(" something ");
}
//end of bind
//function
function myFunction(parameter) { alert( parameter ) };
//end of all function
the trouble is the function its executed without click
Example 2
index.html
<div id="thediv" onclick="myfunction('something')" >
script.js
function myFunction(parameter) { alert( parameter ) };
yap its done with this but the trouble if i have many element in index.html it will painful to read which element have which listener
i want to separate my code into 3 section (similiar with example1)
the view(html element)
the element have which listener
the function
what should i do? or can i do this?
(i don't want to use another library)
Placing () (with any number of arguments in it) will call a function. The return value (undefined in this case) will then be assigned as the event handler.
If you want to assign a function, then you need to pass the function itself.
...onclick = myFunction;
If you want to give it arguments when it is called, then the easiest way is to create a new function and assign that.
...onclick = function () {
myFunction("arguments");
};
Your first solution logic is absolutely ok .. just need to assign a delegate ... what you are doing is calling the function .. So do something like this ...
//bind event listener
function initialize(){
document.getElementById("thediv").onclick = function () { myFunction(" something "); };
}
//end of bind
Instead of assign you invoke a function with myFunction();
Use it like this
//bind event listener
function initialize(){
document.getElementById("thediv").onclick = function(){
myFunction(" something ");
}
}

Backbone.js event always activated [duplicate]

i have the following code which extends the JQuery and adds a method to the JQuery:
$.fn.attachWithMessage = function () {
$(this).focusin(showMessage());
}
function showMessage() {
alert('hi');
}
so I can use that code as follows :
<input type="text" name="name" id="textbox" />
$(document).ready(function () {
$("#textbox").attachWithMessage ();
});
when I load the page for the first time, a message box shows up with ('hi') message.
even if I didn't click in the text box.
I also tried the click event, and the message still shows automatically.
any ideas ??
The issue here is that when you pass showMessage() as a parameter to focusin, the function showMessage is executed and the return value is passed to focusin.
Instead you need to pass a reference to the function (without the paranthesis).
Use the following code to extend:
$.fn.attachWithMessage = function () {
$(this).focusin(showMessage);
}
Working example# http://jsfiddle.net/eXEP5/
EDIT:
If you want to pass a parameter to showMessage then try this:
$.fn.attachWithMessage = function () {
var param1 = "Some Param";
$(this).focusin(function(){
showMessage(param1); //Make sure showMessage is modified accordingly for the parameters.
});
}
just remove the parenthesis
$(this).focusin(showMessage());
should be
$(this).focusin(showMessage);
Hope this helps

Categories

Resources