GetElementById giving ReferenceError in Chrome - javascript

I have no idea what's going on because I have never had problems with JS but here we go. I keep getting an Uncaught ReferenceError in Chrome with this code:
function showShareButtons() {
var buttons = getElementById("sharebtns");
document.buttons.style.visibility = 'visible';
}
Can someone tell me what's wrong? Thanks!

You can't simply declare getElementById by itself for a variable. You would need to use document.getElementById:
function showShareButtons() {
var buttons = document.getElementById("sharebtns");
buttons.style.visibility = 'visible';
}
Even though you eventually use document in your code, it would not be the same since the variable is unable to be declared as anything definitive.

document.getElementById("sharebtns");

It should be like:
function showShareButtons() {
var buttons = document.getElementById("sharebtns");
buttons.style.visibility = 'visible';
}

Related

Passing multiple parameters to function using settAtribute "onclick" in Javascript?

In my code I need to do this:
function myFunction() {
/*more code*/
let id = 12;
let name = "something";
deleteBtn.setAttribute("onclick", "otherFunction("+id+","+name+")");
}
In which
function otherFunction(id, name){
/*does other stuf*/
}
The issue is, when I run the code and load the html page I get this error:
SyntaxError: missing ) after argument list.
I can't figure out what I'm doing wrong.
when it comes to syntax error recheck what you have typed
first i dont see you declare the deleteBtn variable
deleteBtn.setAttribute("onclick", "otherFunction("+id+","+name+")");
check this code it works
document.getElementById('asd').setAttribute('onclick', `otherFunction("${id}","${name}")`);

Javascript doesn't add the class

I just started learning javascript and i have a piece of code that is not working and i can't figure out what is wrong.
I have already checked the names of everything if they are spelled correctly multiple times.
function beautify() {
document.write("ja");
var item = document.getElementById("top");
item.classList.add("beautiful");
return;
}
Please refer to https://javascript.info
A very good website to refer.
document.body.innerHTML = "<button onclick='beautify()'>Click Me</button>";
document.body.innerHTML += "<h1 id='top'>Manish</h1>";
function beautify()
{
var item = document.getElementById("top");
item.classList.add("beautiful");
}
.beautiful{
color:red;
}
To debug the code and try to understand the problem, i would use console.log().
function beautify(){
console.log('function is executed');
document.write("ja");
var item = document.getElementById("top");
item.classList.add("beautiful");
return;
}
beautify();
So you execute the function - by calling function_name(); - after you have declared it, and check if the console.log() writes something through your browser console. For example on Firefox or Chrome by pressing F12 you can access it.
EDIT: I forgot to mention you can also see Javascript errors through the console in case

Retrieving number of pages of a PDF using PDF.JS fails with return

I don't understand the following. Maybe I am missing some really stupid issue here... can anybody solve it? Thanks in advance.
I have this code in Javascript:
function funcLeNrPaginasPDF(strCaminhoPDF) {
var objLivrariaPDF = window['pdfjs-dist/build/pdf'];
var objDocumentoPDF = null;
objLivrariaPDF.workerSrc = '/pdfjs/pdf.worker.js';
// strCaminhoPDF var contains the pdf doc: "documento.pdf"
var oprCarregaPDF = objLivrariaPDF.getDocument(strCaminhoPDF);
oprCarregaPDF.promise.then(function(objDocumentoPDF) { document.getElementById('nr_paginas').textContent = objDocumentoPDF.numPages; });
It works like a charm, thus, if I change document.getElementById... and put
alert (objDocumentoPDF.numPages);
it works as well... However if I place a "return" the function returns me an undefined variable content. Like this:
oprCarregaPDF.promise.then(function(objDocumentoPDF) { return objDocumentoPDF.numPages; });
Any thoughts why? I need a variable to hold the number of pages.
Regards.
Solved it. Ashamed of such unimportant and easily spot-table fault. The return must've been put outside the bracket of the inner function... ahmen.

JQuery adding object function using .on()

I'm trying to add an object's function to a button that is created when some conditions are met. Does it matter if I have the var I'm trying to change outside document.ready?
var myvar = 1;
$(document).ready(function(){
var myobj = {
changeMyVar: function(){ myvar++;}
}
...
/* button id='my-button' is created in a div id='mydiv' */
...
$('#mydiv').on('click', '#my-button', myobj.changeMyVar);
});
No function is attached to the button and no error is thrown. In fact, console.log(myobj.changeMyVar) returns undefined. What am I missing here?
Edit: I lied about no errors, I get a 'undefined is not a function' on the .on() line.
Thanks!
Edit2: After further analysis, I discovered a silly type-o in my original code. Thanks for the answers!
I tried replicating your issue in a fiddle, but it worked.
Try this out http://jsfiddle.net/7fjk3wxs/1/
This is what I used:
var myvar = 1;
$(document).ready(function(){
var myobj = {
changeMyVar: function(){
myvar++;
alert(myvar);
}
};
$('#mydiv').on('click', '#my-button', myobj.changeMyVar);
});
After further analysis, I discovered a silly type-o in my original code. Thanks for the answers!

Function not defined javascript

For some reason my javascript code is messed up. When run through firebug, I get the error proceedToSecond not defined, but it is defined!
JavaScript:
<script type = "text/javascript">
function proceedToSecond () {
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="visible";
}
function reset_Form() {
document.personalInfo.reset();
}
function showList() {
alert("hey");
if (document.getElementsById("favSports").style.visibility=="hidden") {
document.getElementsById("favSports").style.visibility="visible");
}
}
//function showList2() {
//}
</script>
HTML:
<body>
<!--various code -->
<input type="button" onClick="proceedToSecond()" value="Proceed to second form"/>
</body>
The actual problem is with your
showList function.
There is an extra ')' after 'visible'.
Remove that and it will work fine.
function showList()
{
if (document.getElementById("favSports").style.visibility == "hidden")
{
// document.getElementById("favSports").style.visibility = "visible");
// your code
document.getElementById("favSports").style.visibility = "visible";
// corrected code
}
}
There are a couple of things to check:
In FireBug, see if there are any loading errors that would indicate that your script is badly formatted and the functions do not get registered.
You can also try typing "proceedToSecond" into the FireBug console to see if the function gets defined
One thing you may try is removing the space around the #type attribute to the script tag: it should be <script type="text/javascript"> instead of <script type = "text/javascript">
I just went through the same problem. And found out once you have a syntax or any type of error in you javascript, the whole file don't get loaded so you cannot use any of the other functions at all.
important: in this kind of error you should look for simple mistakes in most cases
besides syntax error, I should say once I had same problem and it was because of bad name I have chosen for function. I have never searched for the reason but I remember that I copied another function and change it to use. I add "1" after the name to changed the function name and I got this error.

Categories