Im writing an ReactJs app simulating a text editor for coding. I have a textarea that show the line count, and the other one has all the code that the user will be writing. I've tried using this method:
textEditor.onScroll = (e)=>{
linecount.scrollTop = textEditor.scrollTop;
linecount.scrollLeft = textEditor.scrollLeft;
};
But the browser console throws this error: Uncaught TypeError: can't define property "onScroll": Object is not extensible. I suppose that this happens because both textarea are declared as:
var textEditor = React.createElement("textarea",{id:"textEditor"});
var linecount = React.createElement("textarea",{id:"linecount"});
And not as document.getElementbyid... How could I synchronize the scroll of the textEditor to the linecount?
Related
const quoteText = document.querySelector("quote")
quoteBtn = document.querySelector("button")
// random quote function
function randomQuote() {
//Fetching random quote from API and parsing it into Js Object
fetch("https://api.quotable.io/random").then(res => res.json()).then(result=>{
console.log(result);
quoteText.innerText = result.content;
});
}
quoteBtn.addEventListener("click", randomQuote);
I expect it to next the quote as i am clicking on it, but rather it is displaying in the console as "Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerText')"
It looks like you are trying to fetch a random quote from an API and display it on a website when a button is clicked.
There's a syntax error in the code, the quoteBtn declaration is missing a var or const keyword, which should be fixed:
const quoteText = document.querySelector("quote");
const quoteBtn = document.querySelector("button");
Additionally, make sure that the elements with the quote and button class names actually exist in your HTML, otherwise quoteText and quoteBtn will be null and the code will throw an error when trying to add the click event listener.
If you use document.querySelector(), you need to use a class or an id, unless your target is a native html element. <quote> is not a native html element. So I guess you need to use:
const quoteText = document.querySelector(".quote")
Mind the . in document.querySelector(".quote")
I am working on a next js project , copied some coe on code pen , it is used for a product design of an e commerce website . However i am having this problem.
TypeError: Cannot set properties of undefined (setting 'className'). What is an equalvalent of
getElementsByClassName or how can i override this eror
here is a glimse of the code
var slider = document.getElementsByClassName("sliderBlock_items");
var slides = document.getElementsByClassName("sliderBlock_items__itemPhoto");
var next = document.getElementsByClassName("sliderBlock_controls__arrowForward")[0];
var previous = document.getElementsByClassName("sliderBlock_controls__arrowBackward")[0];
var items = document.getElementsByClassName("sliderBlock_positionControls")[0];
You can use:
document.querySelector(".your_class_name").value
querySelector() can be used to select elements on a page, just pass in a CSS like selector...
Cannot set value of undefined would mean that you are trying to select HTML elements that are not on the page. This could mean your code gets run before the components get rendered
Share your full code, or add that code inside a useEffect()
I'm currently creating a game with Javascript and HTML using an MVC design pattern. However, when uploading to the cafe I'm using, I keep getting an error that my View.js class is not being defined in the Controller.js class. However, as by the snippet of code below, you can see that it is:
"use strict";
var model = new Model(),
view = new View(),
controller = null;
function Controller(){
this.init = function(){
view.playGame();
}
}
I also have included the relevant javascript classes within script tags on the single html sheet I'm using. The error message I get in the Chrome debugger is "Uncaught ReferenceError View not defined in Controller.js" Does anybody know why this has started happening? As I have been working on this project for a while and this is the first time it has happened.
I am attempting to get the window of an iFrame using the following code:
var frameWindow = document.getElementById("loginframe");
var iWindow = frameWindow.contentWindow;
Unfortunately, I keep getting the following error:
Property 'contentWindow' does not exist on type 'HTMLElement'.)
As you can see in the screenshot below, "contentWindow" is highlighted in red which is an error...
I have tried casting:
let map = document.getElementById("loginframe") as HTMLObjectElement;
let insideDoc = map.contentDocument;
But this does not work either...
Is this something to do with angular libraries that perhaps I need to include?
First of all you shouldn't select a DOM element like that you should use a viewChild to do that.
<iframe src="urlHere" #loginframe ></iframe>
Then you can use it in your TypeScript code like this:
#ViewChild('loginframe') loginframe: ElementRef;
After that you can select the element like this: (Note: you should cast it to a HTMLIFrameElement)
const win = (<HTMLIFrameElement> this.loginframe).nativeElement.contentWindow;
Here is a fully working plnkr! (open your console to see the output)
https://embed.plnkr.co/kicS6o8QlOEcXyMKNjFi/
Using default mixitup configuration $('#id').mixitup(), I am adding a filter button dynamically by appending html code for button <li> tag. And calling the same function again instantly after adding html code to the page, in order to make the new button work. After clicking some filter buttons on the page (even if I don't press the new one) animation effects break and on the browser console I see:
Uncaught TypeError: Cannot read property 'left' of undefined error.
The error occurs on line 937:
$toshow.each(function () {
var data = this.data;
data.tX = data.finalPos.left - data.showInterPos.left; //HERE
I saw on documentation how to add new images to the list by using jquery after method, but there are no explanations about how to dynamically add filter buttons and initialize them on the fly.
Is the described behaviour expected?
That means I am doing something wrong. Then, how to initialize the new filter button correctly?
I am using Mixitup 1.5.6 (latest) with jQuery 1.10.2 (Also tried with jQuery 2.0.3).
Thanks in advance!
Your problem is that either data.finalPos or data.showInterPos is undefined. console.log data after you define it to see if you even have those keys
$toshow.each(function () {
var data = this.data;
console.log(data); //here
data.tX = data.finalPos.left - data.showInterPos.left;