I am learning DOM Events and I keep receiving an error message.
my code is the top half works perfectly however the remove section keeps getting the following "Uncaught TypeError: document.getElementByClassName is not a function
at js.js:7"
any advice much appreciated.
`var button= document.getElementById("button");
button.addEventListener('click', function() {
alert ("Click!!!!!!!!!!");
});
var remove = document.getElementByClassName("remove");
remove.addEventListener('click', function() {
return ("removed!!!!!!!!!!");
});`
You may have a type error, remember you are referencing many dom elements and not just one
it should be getElementsByClassName not getElementByClassName
which you can then loop over the elements using array method to append listener on each. Example code below;
let remove = document.getElementsByClassName("remove");
remove.forEach(elem => {
elem.addEventListener("click",myEventHandler);
});
Related
I am rendering a value from django backend to frontend, and I am trying to detect the div value change with MutationObserver. Below is my current code:
MutationObserver part:
window.addEventListener('load', function () {
var element = document.getElementById('myTaskList');
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(myFunction);
observer.observe(element, {
childList: true
});
function myFunction() {
console.log("this is a trial")
console.log(element);
console.log(element.innerHTML);
}
// setTimeout(function(){
// element.innerHTML = 'Hello World!';
// }, 1000);
//
// setTimeout(function(){
// element.innerHTML = 'Hello Space!';
// }, 2000);
});
html part:
<div hidden id="myTaskList">{{resultList | safe}}</div>
I am rendering a string "dummyValue" to the div, but just don't see the value from the console.log() statements inside function.
this works well when I uncomment the setTimeout functions though.
Thanks for any help on why MutationObserver won't detect the rendered div value
I finally figured out the reason. Hope this might be helpful for people having similar issues in the future.
So, basically I was using my Django form submit button to do two actions at one time:
1. submit data to the view and process the data in the view;
2. trigger another function with the click action through
Ajax.
The second action was blocked by the first action, and I was only able to get result from action 1.
My solution: I modified action 1 to use Ajax as well. As I mentioned above, I originally used the Django form to submit data. I trigger action 2 inside the success function of action 1. Everything is working well now.
I stuck with the inline validation in the kendo grid.
I don't want to validate after losing focus. I want to validate immediately after typing. So I start using the HTML validator. It works pretty well but the problem is I cant answer these two questions:
which event set the input from valid to invalid.
which event displays the error message.
My Current work: https://dojo.telerik.com/OSONo/56
which event set the input from valid to invalid.
...
which event displays the error message.
Just run your kendoValidator with validator.validate();
The error messages are also set with validate().
Something like this should work:
$(document).on('input propertychange', function() {
validator.validate();
});
The warning seems to be hidden behind some elements, so you can also add the folowing errorTemplate to your kendoValidator:
errorTemplate: '<div class="k-widget k-tooltip k-tooltip-validation" style="margin: 0.5em; display: block;"><span class="k-icon k-i-warning"></span>#=message#<div class="k-callout k-callout-n"></div></div>'
And the whole solution:
https://dojo.telerik.com/OSONo/66
Solved my Problem on my Own. I will edit the post so you can see what i mean but first i just give the dojo projcet.
https://dojo.telerik.com/OSONo/64
my edit:
I am sorry for my previous anwser, i just want to give him my solution i mention in my comment.
In my solution i created an event listener, how listen to all input elements. When something has changed it, saves the current cursor position (its import for ie support) and after this it trigger my "change" event. The "change" event check if it is valid or invalid. If it is invalid the kendo validator shows imidently the error-message (not as default by a blur event).
var ValidierungCheckClass = (function () {
return {
AllDOMElements: function () {
$('body').on('input', function () {
var myActiveElement = $(':focus');
if ((myActiveElement) && (myActiveElement.context.activeElement.nodeName.toLowerCase() !== "body")) {
var myActiveDOMElement = myActiveElement[0],
start = myActiveDOMElement.selectionStart, //just for IE Support
end = myActiveDOMElement.selectionEnd; //just for IE Support
myActiveElement.trigger("change");
myActiveDOMElement.setSelectionRange(start, end); //just for IE Support
}
})
}
}
});
The change event is allready created from kendo so you dont have to write your own.
At least you have to call the method when creating the website.
<script>
ValidierungCheckClass().AllDOMElements();
</script>
This is my Solution to my problem.
best regards.
I have written a Jasmine test that clicks on the first error message in a list and closes it. It then checks that the number of errors has reduced to the expected amount:
it('should close the error if the errors close button is clicked', function() {
element.all(by.repeater('error in errorList')).then(function(errorList) {
errorList[0].element(by.id('error0')).then(function(error0) {
error0.click();
var arrayLength = errorList.length;
expect(arrayLength).toEqual(1);
});
});
});
When I run this I get the message Expected 2 to equal 1. 2 is the length of the error array at the start of the test. If I manually recreate this, the error message definitely closes when clicking anywhere within error0. Is it possible that clicking this takes some time and this isn't registered by the time the expect statement is run?
Here is the relevant part of the HTML:
<a class="po-cross-link" href="" ng-click="closeError(error)" id="{{'error'+$index}}">
<img class="po-cross" src="\assets\black-cross.png" alt="close">
</a>
Thanks
I guess you are changing the model in the click handler but you expect the DOM elements to be changed instantly. Angular needs a $digest cycle to update the DOM according to the model, so I suggest you run scope.$digest() after clicking. If you don't have a scope in your test, you can also use the $rootScope.
Thanks...I sussed it shortly after posting. Similar in principle the other answer given I think. It's because I needed to get the most recent version of the DOM. I added in a second asynchronous function as follows:
it('should close the error if the errors close button is clicked', function() {
element.all(by.repeater('error in errorList')).then(function(errorList) {
errorList[0].element(by.id('error0')).then(function(error0) {
error0.click();
element.all(by.repeater('error in errorList')).then(function(errorListNew) {
var arrayLength = errorListNew.length;
expect(arrayLength).toEqual(1);
});
});
});
});
If I call MagicZoomPlus.stop(); on active magiczooms I'll frequently get the error:
Uncaught TypeError: Cannot read property 'width' of null
At other times I'll get this error:
Uncaught TypeError: Cannot read property 'r' of undefined
When that happens, mousing over the thumbnails triggers:
Uncaught TypeError: Cannot read property 't16' of null
I've tried ...
calling MagicZoomPlus.stop() within the onload event
calling MagicZoomPlus.stop() within a setTimeout of different lengths
calling MagicZoomPlus.stop() after testing for the presence of MagicZoomPlus
testing an image for width/height before calling MagicZoomPlus.stop()
setting width/height on images via css and attributes before calling MagicZoomPlus.stop()
Here's a link to a jsfiddle that uses markup copied from an example on their docs page:
http://jsfiddle.net/sjjju4x4/6/
If you 'run' the fiddle with the console open you'll sometimes get the error, sometimes not. If you reduce the timeout to 10 ms it'll happen more often
Seems like I can't post without a code sample, so here's the JS from the fiddle:
var output = document.getElementById('status');
setTimeout(function () {
document.getElementById('status').textContent = '...............calling stop';
MagicZoomPlus.stop();
}, 20);
Thanks in advance for any help or suggestions you can provide.
Please make sure that the MagicZoom instance is ready before calling MagicZoomPlus.stop().
It is possible to do this with the “onready” callback described at this URL below:
https://www.magictoolbox.com/magiczoomplus/integration/#api
Here is some sample code:
MagicZoomPlus.options = {
'onready': function(id, isUpdated) {
setTimeout(function () {
document.getElementById('status').textContent = '...............calling stop';
MagicZoomPlus.stop(id);
}, 20);
}
};
Here is a jsfiddle to help you see the code:
http://jsfiddle.net/pg9f98z0/
I'm going nuts here but the each function is just not working for me.
I have about 20 elements with a class name of "lookup" (text boxes) and this function successfully turns all elements red:
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.setStyle("color", "red");
});
However, in the following code, I would expect to get some alert for each element but the alert don't hit at all, and no exception is raised either. It is like the each is iterating through 0 items....
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.each(function(el)
{
alert("hi");
});
});
Any idea what I might be doing wrong?
In both examples above, I used $$('.lookup').each and $$('.lookup').setStyle() with the same outcome (example 1 works; example 2 doesn't).
Thanks in advance.
Which browsers have problems? Try use 'window' instead 'document'
window.addEvent('domready', function(){
var tb = $$('.lookup');
tb.each(function(el){
el.setStyle("color", "red");
alert("hi");
});
});
In mootools better always use 'each' for working with array of elements.
I've discovered that reordering the mootools include script so that it is referenced after the Microsoft WebResource.axd?d= include script resolves the problem. Mootools appears to handle the conflict, whereas Microsoft ASP.NET can't.