My form calculations work in my jsfiddle, however in my wordpress page, it says Uncaught TypeError: Cannot set property 'onchange' of null. Is my page not loading the function when it loads?
(javascript in the header)
function doTotal(form) {
var a = (+form.halfday1.value);
var b = (+form.fullday1.value);
form.total1.value = a + b ;
}
document.getElementById("quote").onchange = function (){doTotal(this)};
http://jsfiddle.net/2666c/
Your code not run, becouse on moment it try to find the <element id="quote"/> there are no such elements. You need to put your code under this element. Or run it on document load event.
As example:
jQuery(document).ready(function($){
jQuery('#quote').change(function (){doTotal(this)});
});
Related
Why this code lines are not working
let a = document.getElementsByTagName("input")[0].value;
let b = document.getElementsByTagName("input")[1];
b.value = a;
A simple code to get value from one text and paste it into another text.
The issue code be that your code is running before the DOM is fully loaded. In that case you should get the following error:
Uncaught TypeError: Cannot read property 'value' of undefined
To solve the above issue either you can palce your code at the bottom of the body tag or wrap the code with DOMContentLoaded.
Demo:
<script>
document.addEventListener('DOMContentLoaded', (event) => {
let a=document.getElementsByTagName("input")[0].value;
let b=document.getElementsByTagName("input")[1];
b.value=a;
});
</script>
<input value="123"/>
<input />
JavaScript can't get input element.
Why did you decided to get inputs by theirs tagname? Use id's or classes for getting it.
Second is, check it for availability at all.
for example:
const [firstInput, secondInput] = document.getElementsByTagName("input");
if (firstInput && secondInput) {
secondInput.value = firstInput.value || 'default value';
}
Something like that.
I am using WordPress and I am trying to get and assign the value of a data attribute to a variable using JavaScript inside functions.php in my custom child theme.
The page renders the following body:
<body class="(...)" data-elementor-device-mode="desktop">
I have the following function:
var body = document.body;
console.log(body);
var bodyDevice = body.dataset.elementorDeviceMode;
console.log(bodyDevice);
The first console.log returns the body as expected, but the second console.log still returns "undefined".
It must be a syntax issue, since the following
var bodyDevice = body.clientWidth;
console.log(bodyDevice);
will return the current width of the body element (which solves my issue); anyway, why is
var bodyDevice = body.dataset.elementorDeviceMode;
console.log(bodyDevice);
not returning "desktop" value?
Elementor inserts the data set by JavaScript on its initialization, see line 271 : https://github.com/elementor/elementor/blob/master/assets/dev/js/frontend/frontend.js
Basically your code is returning nothing because it is executed before the Elementor has inserted the data set... So, there is no data-elementor-device-mode at the moment your code is executed.
Try to execute your code after the page loads using like:
window.onload = function() {
var bodyDevice = document.body.dataset.elementorDeviceMode;
console.log(bodyDevice);
};
Imagine the following dataset:
{"FakeEconomy":{
"2016-04-05":5651694,
"2016-04-06":5513759,
"2016-04-07":5410169,
"2016-04-08":5094142,
"2016-04-09":4768829,
"2016-04-10":5101458,
"2016-04-11":5776419,
"2016-04-12":5692041,
"2016-04-13":5568383,
"2016-04-14":5555027,
"2016-04-15":5116844,
"2016-04-16":4653882,
"2016-04-17":5112466,
"2016-04-18":5764588
}}
When I pass it through the jQuery each function, it works fine, but then it throws a random:
Uncaught TypeError: Cannot read 'visits' of undefined
The following is the jQuery code:
console.log(dataset['visits']); // Prints the data above
$.each(dataset['visits'], function(index,value) {
pageName = index;
$.each(dataset['visits'][index], function(index,value) {
timeline.push(index);
visits_data.push(parseInt(value));
console.log(timeline);
})
});
What's causing the error?
Found out that the reason the program is raising an error is because I placed the jQuery ready function, which within it includes the function I wrote above, in the JavaScript file versus the HTML file.
In essence, this:
$(document).ready(function(){
var collected_results = graph_data(dataset); // Has the each function
var visitsChart = new Chart(collected_results[0], collected_results[1]);
var devicesChart = new Chart(collected_results[2], collected_results[3]);
var osChart = new Chart(collected_results[4], collected_results[5]);
})
was in the JavaScript file, and the JavaScript file loads faster than the HTML file.
Because the JS file loads faster than the HTML file, it raises the error because it cannot read the objects.
How do I get reference of the <div> id and title from a external JS by using the code below:
function recordedEvent() {
var v_Id = $(this).attr('Id');
var v_Title = $(this).attr('Title');
var o = { Title : v_Title, ObjectId : v_Id };
alert(JSON.stringify(o));
}
The function is called in the HTML with a onclick called box1().
Code in CplTemplateSetup.js is where I want to run the function from into the HTML:
content_left_30_four_click_images_right_70_head_content_template.html
Any help would be appreciated.
P.S.: JSON data (zip archive)
Well the most obvious problem is that you don't have a closing parenthesis after your callback.. otherwise the code looks good
Edit
window.lastClickedBoxData = {}; // just reassign that within your function
or
window.runThisWhenClicked = function () {
var v_Id = $(this).attr('Id');
var v_Title = $(this).attr('Title');
var o = { Title : v_Title, ObjectId : v_Id };
};
then just
$(".box").click(window.runThisWhenClicked);
I don't think that the problem that you're facing would be apparent to anyone who doesn't view your code.
You defined a function within a script tag, in the html, and called that function in the onclick attribute of the box being clicked on. To that function, this refers to the box that was clicked on. From there, you call a function within an external js document. In that function, this refers to the window object. In other words, for the code that you posted, $(this) is a jquery instance of the window object which doesn't have the attributes that you're looking for, such as id and title, so they're blank.
To see what I'm talking about open the console and add the following line of code to each of your functions:
console.log(this);
If you're having trouble doing that, the following code should work as well, but it's not as good for debugging:
alert(this);
You need all of your code to be in the html script tag or in the external document. Also, you shouldn't define the function to be called during a click event using onclick within the html. It's better to do it using javascript or jquery so that your javascript is completely separate from your html.
EDIT: You shouldn't update your question with an answer. You should edit the original question with this information so that anyone having a similar problem can find the solution. I'd have commented on the answer directly, but I don't have the reputation to do this.
I am new in HTML5 & trying to learn drag & drop feature.I have a JavaScript function for creating div element & attaching dragstart event to it.
var taskDefination = document.createElement("div");
taskDefination.className = "defaultButtonHolder";
taskDefination.setAttribute("draggable","true");
document.getElementById("toDo").getElementsByClassName('columnContent')[0].appendChild(taskDefination);
taskDefination.addEventListener('dragstart', dragStart, false);
}
Now I have a drop zone created as
<span class="columnWidth">
<div class ="columnHeader">Progress</div>
<div class ="columnContent" ondragenter ="dragDrop.dragEnter(event)"></div>
</span>
where the dragEnter function belongs to an external javascript file where it has been designed as a closure.I have checked network tab and this javascript file is perfectly loading.
var dragDrop = function(){
var _dragEnter = function(){
console.log("Dragged dropped");
}
return{
dragEnter:_dragEnter
}
}
Now the issue is whenever i am trying to drop the element in dropzone it is throwing an undefined not a function error. But ondropeneter event , if calling a function written in same HTML page it is perfectly executing.Why does it throwing an undefined not an function error though it is working fine function written in same HTML page?
Your closure isn't properly formed. As it stands, dragDrop is a function object returned from the function expression and as such doesn't have the code you want attached to it. Have a quick read of function expressions here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function
It looks like you're trying to use a closure to implement a module pattern. To do this, you need to rebuild your code like this:
var dragDrop = (function() {
var _dragEnter = function(){
console.log("Dragged dropped");
}
return {
dragEnter:_dragEnter
}
})();
The first set of brackets around the (function {}) make it a closure. The second set of brackets afterwards (function {})() execute it immediately. This means your module is returned to the var dragDrop and then you will be able to successfully call dragDrop.dragEnter.