JS addEventListener -> update data-action - javascript

I have a game where you press a button, depending on what you press it shows up a menu by using data-action. E.g I got a main menu, press "news" and the news menu will be called using data-action="news".
Now I will return data via the game, and will therefore send that data (not relevant) over via JS using addEventListener. However, I'd like to make an if-statement which will set the data-action to whatever was sent from the game. How to update data-action via JS?
If event.date.type is "news" -> show the new-news menu which will be shown by setting data-action to "new-news". This doesn't work, how to do it?
if (event.data.type == "news"){
data-action="new-news"
}

Use the dataset interface:
element.dataset.action = 'new-news'

From what I understand, you are having trouble assigning a data element to some element. It seems to be just a syntax error.
Instead of:
data-action = "new-news"
Use the dataset like following:
element.dataset.action = "new-news"
This should work :)

Related

get bootstrap modal element id on hide.bs.modal

I am looking to return the element ID of the currently being hidden modal in bootstrap. I cannot seem to find a way to capture this via this code:
$(document).on('hide.bs.modal', function (e) {
// I want to know what the attr ID is of THIS modal being closed?
// I tried console.log(e) to see if I could find the reference but its not in the object?
});
The purpose is to have this for all modals, some modals contain input fields, if changed to a dirty flag I can alert the user that data loss may occur if they close this modal.
If you log the event you receive inside that handler function, you'll notice there is a target node on their that contains the actual modal. So getting the id should be as simple as:
var id = e.target.id;
have a look at the demo I set up:
http://www.bootply.com/JvORc5bWvD
On close you'll see the modal id in the console.
I can see here I was getting an empty target when I was stringifying the return. However, if I alert (e.target.id) it returns the proper id. Thanks!

Javascript is done, but browser do not reflect these changes (ASYNC?)

I am using CEF and CefSharp.
I have one c# class that its purpose is to know if JS function call is done and then call call JS again on curent element xPath in
class test {
//array of Xpaths of elements
elementsXpaths
public IsDone(){
LoadNext()
}
LoadNext(){
call = string.Format("click('{0}')", elemenentsXpath[next])
browser.ExecuteScriptAsync(call)
}
}
Then JS something like this
function click(xpath){
elementFoundedByXPath.click()
elementFoundedByXPath.style.backgroundColor = "#FF0000"
test.isDone();
}
My problem is, that background color is not changed right after click().
So for example I have one element, clicking on this element reveal some other elements (fe I click on show login button and login and password input are shown after this click) and then click do not fails, but I cant see that login and password input. Very odd. I would guess that this will fail, because element is not founded (I am checking this in JS).
I am also checking this in debug, when I have breakpoint on LoadNext I can see that LoadNext is called and backgroundColor of previous element is not changed.
I assumed that if I do click on that element I can be sure that actual click was performed.
Is this problem with async calling of JS? Will EvaluateScriptAsync() help me ? In that case somebody show me some easy example and difference between these two functions ? Or is problem most likely somewhere else ?

How can I select this element with javascript?

I am trying to write an applescript application that logs into a website upon launching. So far I can successfully open Chrome, load the web page into the active tab, select and input the password, but I cannot click the submit button.
Below is the element on the page:
<button type="submit" class="btn btn--ac" alt="Login"
title="Login" tabindex="6"><i aria-hidden="true"
class="lush lush-locked"></i> Login</button>
My skill level in javascript is little to none, yet I cannot find a way to successfully select this item and click it. I have tried already using the TagName and ClassName but it does not work, perhaps my syntax is incorrect. Is there a way to do this without a ID type?
I have tried:
execute front window's active tab javascript
"document.getElementByClassName('btn, btn--ac').click()"
execute front window's active tab javascript
"document.getElementByTagName('button').click()"
I should note this script runs in Google Chrome.
Thanks for any help in advance.
First of all you're using a wrong function. It should be
document.getElementsByClassName
Try using: (Assuming the Submit button is the only button with class btn)
document.getElementsByClassName('btn')[0].click();
Here's basic definition of the function from Mozilla:
document.getElementsByClassName():
Returns an array-like object of all child elements which have all of
the given class names.
Hence, you get a list of elements. Hence, you select the first element in it (using the 0 as index), and then click on it.
The correct syntax in plain js to select an element by his class is:
document.getElementsByClassName('btn--ac');
With this you'll get an array with all elements with the class 'btw--ac'. In your case try this:
document.getElementsByClassName('btn--ac')[0].click();

How to invoke this Angular method that's bound to ng-click

I'm inspecting the DOM on an Angular application and trying to figure out how I can reproduce one of the events that's bound to a button via the console. The button looks like this:
<button class="button tiny text player-add-button" ng-class="{ 'player-add-button': !player.inLineup, 'player-remove-button': player.inLineup }" ng-click="player.inLineup ? draft.rosterRemove(player) : draft.rosterAdd(player)">
What I'm trying to access here is draft.rosterAdd(). The problem is, this is a table, and there's multiple buttons and player is changing for every button. I'm not entirely sure how to define player here, even if I get into the scope of of the draft object, to pass it in as an argument to rosterAdd()
What's the best way to figure out how I can define player so that I can invoke draft.rosterAdd(player) for all of the players I want to add via the console?
Try this (in Chrome):
Right-click the desired button and select Inspect element;
Open the console tab (make sure the button markup remains selected);
Type draft = angular.element($0).scope().draft;
Type player = angular.element($0).scope().player.
Now you should be able to see how player is structured and call draft.roasterAdd() passing whatever you want.
Some useful references about the code above:
angular.element
Chrome's command line API

Adding to contextmenu programmatically

I am trying to add to the context menu programmatically in Javascript.
The model I'm using is vsync's answer here: https://stackoverflow.com/a/9293946/322537
And I am changing it into Javascript. What I have you can see in this fiddle:http://jsfiddle.net/pB76y/
..
As you can see, if you right click the upper image you can see the new context menu 'View Plate Thumbnail'.
But if you change the id of the menu from 'menu_from_image' to 'menu_from_image_js' (which is the javascript version), then you should get the lower image behaving the same way. But it doesn't.
Why?
You had everything right but it seems that you weren't setting the attribute on the DIV in a way that the browsers was recognizing. Instead of using
cmenu.contextmenu = 'menu_for_image_js';
I altered it to be:
cmenu.setAttribute('contextmenu','menu_for_image_js');
I've created a JS Fiddle that shows the change based on your example: http://jsfiddle.net/pB76y/1/

Categories

Resources