I wrote the following code:
document.addEventListener("DOMContentLoaded", ()=>{
let menu = document.querySelector(' #menu-mainmenu ');
menu.style.display = 'none';
});
let newButton = document.createElement(' div ');
This code didn't cause any problem.
The moment I've added the following code right under the let newButton, suddenly, as it seems, the JS broke (no JS would load properly anywhere in the site).
newButton.className = 'menuButton';
Console returns this error:
Uncaught DOMException:
Failed to execute 'createElement' on 'Document':
The tag name provided (' div ') is not a valid name.
Why would this happen? What is the problem with creating a div element this way?
You have extra spaces around the div tag and that cause an error. Remove them
document.addEventListener("DOMContentLoaded", ()=>{
//let menu = document.querySelector(' #menu-mainmenu ');
//menu.style.display = 'none';
console.log('Worked !!!');
});
let newButton = document.createElement('div');
newButton.className = 'menuButton';
Related
I want to set an Event on an Element without inline Events like:
let myDiv = document.querySelector("#div");
myDiv.addEventListener("click",function({this.style.opacity = "0";})
<div onclick="zero()"></div>
this is code:
<div id="div"></div>
I expected the opacity of div Element changes to 0 but in console of the browser show this error:
Uncaught error: cannot read property addEventListener of null!
You're missing some brackets and introducing an unnecessary line break:
let myDiv = document.querySelector("#div");
myDiv.addEventListener("click", function() {
this.style.opacity = "0";
});
<div id="div">Hallo</div>
With regard to the error you're getting it suggests that you haven't allowed the DOM to load - ie you're trying to add an event listener to an element that isn't there. Your code is in the right order in your question but it's something to be mindful of.
Please try to check the syntax you have written
let myDiv = document.querySelector("#div");
myDiv.addEventListener("click", function() {
this.style.opacity = "0";
});
<div id="div">Content</div>
I use EcmaScript6 and don't know how to apply addEventListener in a Class.
I tried declaring a var out of the Class to call the method EventListener and got an Error :/. I also tried addEventlistener inside of the Class and I can't.
The errors in console, is because I'm try again new alternate.
Don't know solution problem. how add the event listener ?
<!-- language: lang-js -->
class Design{
transition(clickea, up, down){
this.clickea = clickea;
this.up = up;
this.down = down;
let cont = 0;
let focus = document.getElementById(clickea);
let content = document.getElementById(up);
let content2 = document.getElementById(down);
if(cont == 0){
content.style.transform = "translateY(-1000%)";
content2.style.transform = "translateY(0%)";
cont++;
}else{
content.style.transform = "translateY(0%)";
content2.style.transform = "translateY(-100%)";
cont--;
}
}
}
const design = new Design();
let enlance = document.getElementById('sign');
enlance.addEventListener('click', desgin.transition(enlance, loguin,
registro));
Google console
eventos.js:11 Uncaught TypeError: Cannot read property 'style' of null
at Design.transition (eventos.js:11)
at eventos.js:24
or
<!-- language: lang-js -->
class Design{
transition(clickea, up, down){
this.clickea = clickea;
this.up = up;
this.down = down;
let cont = 0;
let focus = document.getElementById(clickea);
let content = document.getElementById(up);
let content2 = document.getElementById(down);
focus.addEventListener('click', function(up,down){
if(cont == 0){
content.style.transform = "translateY(-1000%)";
content2.style.transform = "translateY(0%)";
cont++;
}else{
content.style.transform = "translateY(0%)";
content2.style.transform = "translateY(-100%)";
cont--;
}
});
}
}
const diseño = new Design();
let enlance = document.getElementById('sign');
let loguin = document.getElementById('loguin');
let registro = document.getElementById('registro');
diseño.transition(enlance, loguin, registro);
eventos.js:10 Uncaught TypeError: Cannot read property 'addEventListener' of null
at Design.transition (eventos.js:10)
at eventos.js:29
transition # eventos.js:10
My question is, how i can use listener in the template method Class.
Welcome to Stackoverflow!
It looks like you're seeing this error because your class is expecting a string, but you're providing a DOM chunk.
Your code is essentially doing this...
document.getElementById(document.getElementById('sign'));
If you just provide strings to transition() you should be good.
Regarding your actual question
How can I use addEventListener in Class EcmaScript6?
A class is really no different than a function, its just a way to store data/functionality. You can have a method on the class that gets a piece of DOM or a adds a listener to a piece of DOM, but you can't put a listener directly on the class. As it sits right now, it doesn't look like you are even trying to do that though. Your class simply stores some logic and procedural DOM code which is totally valid.
I require my chrome extension to insert html into a page. I am able to insert the html, but am having issues styling the inserted element the way I want.
The image above is an example of what I'm looking for. I looked at the CSS for the grey box that was inserted and tried to implement those same things, but I get an error in the console when I try to do that.
The error I get:
Uncaught ReferenceError: Invalid left-hand side in assignment
The code I'm using to style it (CSS through JS):
(function() {
// just place a div at top right
var div = document.createElement('div');
div.style.position = 'fixed';
div.style.background-color = '505F69';
div.style.box-sizing = 'border-box';
// div.font-size = '16px';
div.style.top = 0;
div.style.right = 0;
// div.textContent = 'test';
div.style.zIndex = 1000000000;
div.innerHTML += 'Injected!';
document.body.appendChild(div);
})();
I get an error on line with "div.style.background-color" and "div.style.box-sizing".
Any advice on how to replicate this?
"div.style.background-color" and "div.style.box-sizing".
use
"div.style.backgroundColor" and "div.style.boxSizing".
I am trying to create a Bootstrap Modal dialog using JavaScript. The reason I am doing it with JavaScript is because I want to be able to render it later using custom elements (i.e. title, error message). I am fairly new to JavaScript so I do not understand why the code is not executed when I call the function errorMessage(). Can anyone please help out by letting me know what the mistake is and how I can correct it? Is there a more efficient way of doing it? Thank you very much.
By the way I did link the modal.js file to the HTML doc and I am aware of bootboxjs, but I don't want to use it for now.
// Creation of the alert message box.
function errorMessage() {
var Modal = document.createElement('div');
Modal.id = 'myModal';
Modal.className = 'modal fade show';
// To set up the attributes.
Modal.setAttribute("data-backdrop", "static");
Modal.setAttribute("data-keyboard", false);
document.body.appendChild(Modal);
var dialog = document.createElement('div');
dialog.className = 'modal-dialog';
Modal.appendChild(dialog);
var content = document.createElement('div');
content.className = 'modal-content';
dialog.appendChild(content);
var header = document.createElement('div');
header.className = 'modal-header';
content.appendChild(header);
var title = document.createElement('h4');
title.className = 'modal-title';
title.createTextNode = 'Data Error';
header.appendChild(header);
var body = document.createElement('div');
body.className = 'modal-body';
dialog.appendChild(body);
var message = document.createElement('p');
message.createTextNode("Oh... snap. We can't find any items in your list. Please make sure your entry is structured as following:");
body.appendChild(message);
var representation = document.createElement('div');
representation.className = 'well';
body.appendChild(representation);
var representationTxt = document.createElement('p');
representationTxt.style.fontStyle = 'italic';
representationTxt.createTextNode('> Subheader , tag1 , tag2, tag3');
representation.appendChild(representationTxt);
var footer = document.createElement('div');
footer.className = 'modal-footer';
dialog.appendChild(footer);
var closeBtn = document.createElement('button');
closeBtn.setAttribute("data-dismiss", "modal");
closeBtn.setAttribute("type", "button");
closeBtn.className = 'btn btn-primary btn-inverse';
closeBtn.value = 'I got it. Thanks.';
footer.appendChild(closeBtn);
// Show modal dialog box
$("#myModal").modal('show');
}
It is failing on this line: header.appendChild(header); because it cannot append header to itself. Did you mean this?
var title = document.createElement('h4');
title.className = 'modal-title';
title.createTextNode = 'Data Error';
header.appendChild(title);
A debugging tool is invaluable in javascript development (Firebug add-on for Firefox or the built-in tools in Chrome, for example). You would have seen this error right away :)
im trying to insert a new div into the DOM with an id of "app"
var new_div = document.createElement("div");
var app_div = document.getElementById("app");
document.body.insertBefore(new_div, app_div);
this gives me an error in the console:
Uncaught TypeError: Cannot call method 'insertBefore' of null
but i don't know why?
You need to wrap your code to window.onload handler:
window.onload = function() {
var new_div = document.createElement("div");
var app_div = document.getElementById("app");
document.body.insertBefore(new_div, app_div);
}
Example on jsFiddle.
Except that it would be better wrapped in onload() as suggested by Igor, don't you want to add new_div to the document first?
document.body.insertBefore(new_div, document.body.firstChild);
Try use jquery document.ready event