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";
};
Related
Can someone please tell me why, when I test the code, I get an error that the code has failed even though everything is working properly? I get the same error for all the 4 functions, and the font size is entered.
Thanks in advance.
The Error: Did you set the ingredients Font Awesome icon font size inside the body of the ingredientsNormal() function?
<script>
function ingredientsHover() {
document.getElementById("ingredients").firstElementChild.firstElementChild.style.fontSize = "300%";
}
function ingredientsNormal() {
document.getElementById("ingredients").firstElementChild.firstElementChild.style.fontSize = "100%";
}
function preparationHover() {
document.getElementById("preparation").firstElementChild.firstElementChild.style.fontSize = "300%";
}
function preparationNormal() {
document.getElementById("preparation").firstElementChild.firstElementChild.style.fontSize = "100%";
}
</script>
Could you tell is why the code has failed? What kind of information did you get from the notification?
The browser behaves permissive regarding not correct executed code. He tries doing it's best converting your stuff into usable HTML ^^ That's way you're test may fail but your browser silently accepts it.
My first approach would be to reduce the complexity by only executing one of those functions first and secondly only logging the outcome of a reduced function call like:
function ingredientsHover() {
const ingredients = document.getElementById("ingredients").firstElementChild;
console.log("ingredients: ", ingredients);
}
If this works you can expand your approach until you hopefully catch the problematic part.
By the way...
Selecting elements the way you're doing it is error prone.
You have several ways to improve your code regarding this.
Two possible suggestions:
Make use of optional chaining like: document.getElementById("ingredients")?.firstElementChild?.firstElementChild?.style?.fontSize="300%"
Improve your way of selecting elements like the following psydo code proposes a possible way: document.querySelector('#ingredients:first-child:first-child'); I didn't tested it but you should get the idea right? :-)
so I've tried to make this code work, but no matter how hard I try, it still won't work. My goal is to make my sprite move using cursors but it won't work. Also for some reason, if my sprite is depending on this:
gameState.cursors.this.input.keyboard.
createCursorKeys();
I know my code is wrong, but I can't figure out how to fix it, here it is down there:
if (gameState.cursors.left.isDown) {
gameState.player.setVelocityX(-160);
} else if (gameState.cursors.right.isDown) {
gameState.player.setVelocityX(160);
} else {
gameState.player.setVelocityX(0);
}
}
Thanks again stack community!
It should be gameState.cursors = this.input.keyboard.createCursorKeys(); so they get assigned properly. This is assuming gameState is a global variable that can be seen from the current scope.
I am a newbie to nightwatch and javascript and for the life of me I am getting stuck at some weird places. I am trying to do a simple test which just clicks on three different tab menu items one at a time. When I run the code I get an ERROR: Unable to locate element: "#Performing_AF" using: css selector.
If I go ahead and use the css selector directly opposed to using elements the code works. Can someone guide me as to where I am going wrong?
The URL I am testing is: https://www.nypl.org/
Here is /pages/homepage.js
var elements = {
searchbutton: '.nyplHomepageApp button[name = "Search Button"]',
Authortalksconversations: '.titleTabs #tab-0',
Exibitions: '.titleTabs #tab-1',
Performing_AF: '.titleTabs #tab-2',
Other_Events: '.titleTabs #tab-3',
DonateButton: '#donateButton',
Shop: '#shopTopLink',
loadicon: '.dcom-loader',
searchboxbutton: 'button[type="submit"]',
inputsearch: '.desktopSearch-form-inputBox #desktopSearch-form-searchInput'
};
var quicksearch = {
go: function()
{
this
.waitForElementVisible('body', 6000)
.api.pause(2000)
.click('#Exibitions')
.pause(2000)
.click('#Other_Events')
.pause(2000)
.click('#Performing_AF')
}
};
module.exports = {
elements,
commands: [quicksearch]
};
And here is tests/homepagetest.js
module.exports = {
'Q': function(browser) {
var goto = browser.page.homepage();
goto.go;
//browser.end();
}
}
As I mentioned in my comments above, if you remove all the pauses from the test it will work. I'm not exactly sure the reasons behind that. It would be better to use waitForElementVisible or waitForElementPresent whenever possible. pause() will make your tests flaky and unreliable.
The way you would use these is
click on a tab
wait for some element on that tab to be visible / present
click on the next tab and repeat
If you really would like to keep the pauses you can get it to work by adding a few variables at the top of your go function and using those variables instead of the #someElement syntax.
go: function() {
var exibitions = this.elements.Exibitions.selector;
var otherEvents = this.elements.Other_Events.selector;
var performingAf = this.elements.Performing_AF.selector;
this
.waitForElementVisible('body', 6000)
.api.pause(2000)
.click(exibitions)
.pause(2000)
.click(otherEvents)
.pause(2000)
.click(performingAf)
}
This works fine for me
ul.titleTabs > li#tab-2
Your css selector also works out for me. What is the error that you're facing?
I am working with JS bookmarklets and I am playing around withjavascript:document.title = "WHATEVAH". However, when I use that by itself, it removes all content on the page. So then I tried javascript:document.title = "WHATEVAH";document.body.innerHTML = document.body; but that didn't work either. Please explain what I am doing wrong, and how I can fix it.
You have to return undefined at the end, otherwise it's going to navigate to a blank page. A common way of doing it is to do:
javascript:document.title = "WHATEVAH"; void 0;
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.