I have a function not defined and not sure why - javascript

I have this script that should work but I am getting the message:
TypeError: Object doesn't support property or method 'push'
I've also tried:
window.push(list);
and this:
var push = document.getElementById('push');
push.addEventListener('click', function() {
var text = prompt('title', '?, curl => ' + 'example.com?callback=?');
push.value = text;
});
I have also tried:
window.push(list);
window.push(prompt("title", "?", "callback=?", "success"), "?,?", ["cat"]);
list.push(text);
and this:
window.push(list);
list.push(text);
Does it mean that I have a typo somewhere in my script code?
<hr>
<p id="push">title,</p>
<p id="request">cat,</p>
I am a student so if I am doing something wrong please let me know.

Related

Getting "undefined" return in readAsDataURL

I'm trying to get a image file from a input field in my form, transform it to a base64 string, and then send it to my backend using AJAX, but it's returning undefined. Weird thing is that I managed to do it in a JSFiddle, but am not achieving this in the server.
P.S.: I'm not gonna write the AJAX call and server interactions, as they are not relevant for this issue. I'm sending more data, and it's getting sent just right.
<form method="post">
<input type="file" id="documento" accept="image/*"/><br>
<button type="submit" id="continuar">Continuar</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$("#continuar").click(function (){
var fileInputDoc = document.getElementById('documento');
var readerDoc = new FileReader();
readerDoc.readAsDataURL(fileInputDoc.files[0]);
readerDoc.onload = function () {
var docb64 = readerDoc.result; //This is the point where everything goes wrong. Here I get the following error: "Cannot read property 'indexOf' of null".
var doc_aux = docb64.indexOf('base64,');
doc_aux += 7;
var doc = docb64.slice(doc_aux);
}
}
</script>
It might also be important to say that I've tested separate parts of the code, such as:
document.getElementById('documento'); (doesn't return null, meaning it found the actual element)
readerDoc.readAsDataURL(fileInputDoc.files[0]); (returns [object FileReader])
Functional JSFiddle
My sources:
https://www.codegrepper.com/code-examples/javascript/convert+input+image+to+base64+javascript
https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader/readAsDataURL

Uncaught ReferenceError: 'a' is not defined at HTMLButtonElement.onclick (gallery.html:1)

When I create a new div element, I want the button to perform an onClick event that will capture the ${Title} variable. Then the getTitle(Title) function will take ${Title} as a parameter and use module.exports so that I can use this variable in another javascript file. (the way I use module.exports is through browserify.)
function createDiv(Title){
var div = document.createElement('div');
div.setAttribute('class', `column-photo ${Type} show`);
var newDiv =
`
<div class="content">
<button class="content-text" id="Btn" onClick="getTitle(${Title})">
</button>
</div>
`;
div.innerHTML = newDiv;
document.getElementById('someID').prepend(div);
}
function getTitle(Title){
var imageTitle = Title.value;
module.exports = imageTitle;
console.log(imageTitle);
}
However, the problem here is that it throws an error when I click the button:
(${Title} = 'a' and filename is gallery.html)
Uncaught ReferenceError: 'a' is not defined
at HTMLButtonElement.onclick (gallery.html:1)
The other javascript file will import this variable. However, console.log(imageTitle.imageTitle) is undefined. How do I fix this?
var imageTitle = require('./file.js');
console.log(imageTitle.imageTitle);
When constructing the HTML element, you need to properly inject the function parameter. The error lays in this line:
onClick="getTitle(${Title})"
if the Title is "a", then after building the string, it becomes:
onClick="getTitle(a)"
which produces this error because a is not defined anywhere.
To fix this, change the line to this one:
onClick="getTitle('${Title}')"
which will be properly resolved to:
onClick="getTitle('a')"

Uncaught SyntaxError: Identifier '$......' has already been declared

so i have a code like this , i used it for a component
<p><input id="note" ></p>
<div><span class="dialog"></span></div>
<script>
let $mathElement = $('.dialog');
let dialSpan = $mathElement[0];
let noteSpan = document.getElementById('note');
try {
// a function to render
render(noteSpan.value, dialSpan);
}
catch(e) {
}
</script>
and there's also a function to allow me to hide and show this component.
but the problem is after i hide and reopen it there is a eror that said "$element" has already been declared ,
can you guys tell me how to avoid this error
the error :
You can't redeclare/override a let variable.
You may want to use some var here.
var $mathElement = $('.dialog');
var dialSpan = $mathElement[0];
let noteSpan = document.getElementById('note');

TypeError: Functionname is not a function at HTMLButtonElement.onClick

I'm pretty new to Javascript and playing around with it at the moment. However, I can't actually test my code because I get the following error:
Uncaught TypeError: namecaller is not a function
at HTMLButtonElement.onclick (Tools.html:101)
Here is my code:
div id="content">
<script>
function namecaller(){
var a = "scurvy";
var b = "dog";
document.getElementById("namecaller").innerHTML = "You are a " + a + " " + b;
}
</script>
Namecaller</p>
<button type="button" onclick="namecaller()">
You are a...</button>
I have no clue why it doesn't work, looked at other StackOverflow questions and also at the W3 tutorials.
function namecaller() {
var a = "scurvy";
var b = "dog";
document.getElementById("content").innerHTML = "You are a " + a + " " + b;
}
<div id="content"></div>
<button type="button" onclick="namecaller()">
You are a...</button>
The code seems to have a lot of problems like your tags were not in properly written. The tags need to open closed properly. And your script should be in right place so that it gets compiled. Then you have not given an id to any of the elements and try calling them. So here is the working example of how the code should be properly written for bug-free compilation.
Sometimes, it is because your function name override some other functions, especially the system defined ones. For example, I once made a function named as "translate." Later, it reports the exactly same error like yours. The solution is quite simple: just change the function name. For me, I make it "function tranlateIt()" and hence the problem is gone forever.
This is not the solution to your particular problem (the accepted answer answers it neatly), but the following might be the useful reference to the future readers (it happened very often to me).
The same error you provided happened to me, when I first declared a variable and then the function with the same name. For example:
var example = 5;
function example() {
console.log("The function just got executed!");
}
<button onclick="example()">Click me!</button>
You have not defined the id of paragraph for which you are changing the value. Just define the Id of paragraph as namecaller and it will work.
See the code below:
<div id="content">
<script>
function namecaller(){
var a = "scurvy";
var b = "dog";
document.getElementById("namecaller").innerHTML = "You are a " + a + " " + b;
}
</script>
<p id = "namecaller">Namecaller</p>
<button type="button" onclick="namecaller()">
You are a...</button
// Write this function code in inside <script> tag or in index.js file
function namecaller() {
var a = "scurvy";
var b = "dog";
document.getElementById("content").innerHTML = "You are a " + a + " " + b;
}
.content{
background-color: bisque;
}
.button{
color: white;
background-color: blue;
}
<!-- Write this code in inside the <body> tag in your index.html file -->
<!-- I added little CSS -->
<div class="content" id="content"></div>
<button class="button" type="button" onclick="namecaller()">You are a...</button>
Your div tag is not properly written. all tags need to open and close properly. You have to give the proper id to any HTML element and then call the function. Run the code snippet.

Internet Explorer 8 error, Object Required (JavaScript)

I wrote a todo in chrome that works fine. I tested it in IE8 and it didn't work. So I made a new file to write specifically in IE8, and I can't even get a simple function to work properly. I would like help in finding out what i'm doing wrong. Thank you to anyone that can school me on this.
HTML
<body>
<p>Home</p>
<form id="form1">
<input type="text" id="inItemText" />
</form>
<button id="btn1" onclick="doIt()">Press Here</button>
<p id="p1"></p>
</body>
Javascript
var inItemText = document.getElementById("inItemText");
function doIt() {
var itemText;
itemText = inItemText.value;
document.getElementById("p1").innerHTML = itemText;
form1.reset();
}
Make sure you do the inItemText assignment after the DOM has been loaded. Otherwise, document.getElementById("inItemText") won't find the element, because it doesn't exist yet.
Either put it at the end of the <body>, or use window.onload:
var inItemText;
window.onload = function() {
inItemText = document.getElementById("inItemText");
};
You're getting that error because inItemText isn't defined. Use document.getElementById('inItemText').
I think the issue is in this line:
itemText = inItemText.value;
You need to declare "inItemText" as a variable.
Perhaps replace it with:
itemText = document.getElementById("inItemText").value

Categories

Resources