Develop Reference

New to Javascript: Popup Menu

I'm trying to make a website and I'm stuck now that I'm in JS territory. I am OK with HTML and CSS, but I feel like a total moron when it comes to JS.
Here's what I have (and I'm sure it's dead wrong) so far...
var clicked = getElementById('loginIcon').clicked;
function showHideLogin() {
if (clicked) {
getElementById('loginField').visibility = "visible";
}
else {
getElementsById('loginField').visibility = "hidden";
}
}
Please, be kind... I'm just starting to learn JS and I'm ripping my hair out and feeling like a complete idiot...
I'm trying to make a login that only shows when an icon (png) is clicked. Otherwise, it's hidden.
EDIT: Thanks for the replies so far. This is how much of a noob I am: Atom says " Node is not recognized as an internal or external command" which, by Googling, I've found out means I don't have Node JS (which I have to research more to understand).
Thanks guys. I'll let you know if it's still not working.

Try
getElementById('loginField').style.visibility = "visible";

You're not setting the visibility correctly. It should be:
getElementById('loginField').style.visibility = "visible";
Also, I'm not sure when showHideLogin is expected to be called, but the norm for setting an event handler is to register a function. Something like:
getElementById('loginIcon').onclick = function() {
// perhaps some conditions or other logic
getElementById('loginField').visibility = "visible";
};

Strange behavior from ko.editables

I'm using the ko.editables plugin for knockout, and it doesn't appear to be caching the previous value correctly. Does anyone have experience with this plugin?
If I do something like this:
var item = { Name: ko.observable("initial") };
selectedItem = ko.observable(item);
ko.editable(selectedItem);
selectedItem.beginEdit();
selectedItem().Name("second");
selectedItem.rollback();
What ends up happening is that selectedItem().Name is still "second", even though it should be "initial".
I looked into the source file, but I don't understand enough about the way JavaScript handles variables to know if what I'm seeing is right or wrong.
I set a breakpoint in the following place within ko.editables.js:
result.rollback = function () {
if (inTransaction()) {
result(oldValue); //breakpoint
inTransaction(false);
}
};
What I found was that oldValue had picked up the new value of the observable, even though commit was never called. Everything I've tried looks exactly like the samples. What am I missing?
Update:
I've updated the code sample. My original code does have the ko.editable() line in it, but thank you to Robert.westerland for pointing it out. It still doesn't work with this extra line.

I know this is an old post, but could be useful for others. I think you might need to call "commit" before the "beginEdit", and I also had to include "true" as a second parameter when calling ko.editable.
Your updated code::
var item = { Name: ko.observable("initial") };
selectedItem = ko.observable(item);
ko.editable(selectedItem, true);
selectedItem.commit();
selectedItem.beginEdit();
selectedItem().Name("second");
selectedItem.rollback();

Accessing custom defined variable/object in javascript in for...in loop

Let me explain the whole problem. I was trying to avoid writing this as it could be a long explanation.
I am working with a tool called Lectora. This is an authoring tool which generates HTML pages and SCORM compliant packages to be deployed to the LMS.
When I insert a button in the Lectora, the code that is generated is something like this...
<script>
// some code here...
button63 = new ObjButton('button63', ....);
button63.setImages('images/btn_next_en.png','images/btn_next_en.png','images/btn_next_mouseover_en.png');
button63.build();
button64 = new ObjButton('button64', ....);
button64.setImages('images/btn_back_en.png','images/btn_back_en.png','images/btn_back_mouseover_en.png');
button64.build();
button65897 = new ObjButton('button65897', ....);
button65897.setImages('images/btn_submit_en.png','images/btn_submit_en.png','images/btn_submit_mouseover_en.png');
button65897.build();
// some more code here...
</script>
So I try to write:
<script>
var arr_buttons = [];
for(var i in window)
{
if(window[i] typeof object)
{
if(window[i] != null)
{
if(window[i] instanceof ObjButton)
{
arr_buttons.push(i);
}
}
}
}
alert(arr_buttons.length); // gives me 845 in IE11 and it gives me 44 in IE8
</script>
And when I check the contents of arr_buttons in console or by any other method, I do not find button65897 of any other button object in it. Which makes me think that it is not iterated at all!! This is my problem.
ObjButton is a Lectora created javascript object and I cannot edit it.
Now, I have set the language option in another variable and depending on the variable value for language, I want to get hold of the object 'button65897' and change its images. Now I am finding it difficult to get hold of 'button65897' in IE8.
Isn't there any way to get hold of the object 'button65897' in IE8?

Issue with retrieving object data on IE 8 on Windows XP or 2003

This is an interesting problem that I am facing with JavaScript and IE8 on Windows XP and Windows 2003. I create an object on the page and then retrive information about that object (for example, its version). When trying to get the version, I am running this code:
var myObject = document.getElementById(objectId);
console.log(myObject.version);
What is interesting is that this code works on every single browser except IE8 on Windows XP and 2003. I've done some debugging and this is where things get interesting.
myObject is not null but myObject.version is undefined. So what I did is I added an alert in between so the code is now as follows:
var myObject = document.getElementById(objectId);
alert(myObject.version);
console.log(myObject.version);
The alert results in "undefined", however, the console.log is now resulting in the actual version. If I add an alert before this alert of anything (let's say alert("something")) then the second alert has the actual version now. I am assuming this is a timing issue (for some reason the object needs sometime to be able to provide the data stored in it?) but I am not sure what kind of timing issue this is or how to approach it.
Sorry for the long description but any help is appreciated.

document.getElementById doesn't return an object. It returns a DOM element. So, you expect to see a .version property in a DOM element, which by the official W3C specification is missing (or at least I don't know about this).
I'm not sure what you are expecting to see in .version, but if it is something custom then you should create a custom object like that:
var o = { version: "..." }
console.log(o);
You said that this may be a time issue. If that's true then I'll suggest to try to access the .version property after the DOM is fully loaded. You can use jQuery for the purpose:
$(document).ready(function() {
var myObject = document.getElementById(objectId);
alert(myObject.version);
console.log(myObject.version);
});
You can add a setTimeout in your function till the .version property is there.
var f = function(callback) {
var check = function() {
var myObject = document.getElementById(objectId);
alert(myObject.version);
console.log(myObject.version);
if(typeof myObject.version !== "undefined") {
callback(myObject.version);
} else {
setTimeout(check, 1000);
}
}
setTimeout(check, 1000);
}

What happens if you put the <script>...</script> tag with the js code at the end of the html file? In my opinion, the code is executed when the DOM is not ready. If you put it in the end, then it will be executed after it's loaded.

jquery programmatic popup window

I'm new to Jquery, so please bear with me. I'm trying to create a function that will programmatically open popup windows. I'm running the following code in Firefox, and it seems to work except that the popup windows disregards the toolbar/menubar/scrollbars/resizable/location parameters (they are still visible/functional and I would like to disable all of them):
wparams[0] = {windowURL:"site.html",height:100,width:100,left:500,top:500,toolbar:0,menubar:01,scrollbars:0,resizable:0,location:0}
var launchWindow = function(p)
{
$('.popup').popupWindow(wparams[p]).trigger("click");
}
var begin = function()
{
launchWindow(0);
}
I would like the popups I'm using jQuery-swip popup plugin (http://swip.codylindley.com/popupWindowDemo.html), am wondering what's wrong with the above code.
Also, when I try to run this code in chrome/safari (typing begin(); in the console) it returns undefined, whereas in Firefox it runs. I'm also confused as to why this is happening.
Thanks.

I didn't understand 'when' you want to open the popup, if when the page complete loading, so it should be
$(document).ready(function() {
launchWindow(0);
});
Also can you explain to me why use trigger(click)??? As of the plugin documentation, this should work like that
var launchWindow = function(p)
{
$('.popup').popupWindow(wparams[p]);
}

Does this work?
wparams[0] = {windowURL:"site.html","height:100,width:100,left:500,top:500,toolbar:0,menubar:01,scrollbars:0,resizable:0,location:0"}

That's a weird way to define the "wparams" array - what happens if you do this:
var wparams = [
{windowURL:"site.html", height:100, width:100, left:500, top:500, toolbar:0, menubar:01, scrollbars:0, resizable:0, location:0}
];
It's not really clear why you're setting that up as an array; I guess maybe there might be other popup configurations stored in it. If that's the case, you'd just write them inside those square brackets, separated by commas.