I'm trying to make javascript application where a user can enter the kind of cookie she/he wants to make, and then select the amount of cookies they want. Once the user makes this selection and presses the "bake" button, the cookies appear randomly in the page. I had an assignment once where I had to generate random divs on a page, and it kind of gave me the idea for this, which is just for fun and practice.
My problem is that I want the user to be able to get unique information about the cookies he/she creates by clicking on them, and I can't get this to work.
(1)
Click Event is not defined properly :
aCookie.onlclick = cookie.display();
// typing error onlclick
// cookie.display() actually it call display function, doesn't give reference
change to :
aCookie.onclick = cookie.display;
(2)
set id "kind" to input box
(3)
Current code set properties (id,kind,x,y) to instance of Cookie, not to element.
Change code so that, the element is a parameter & set properties to it.
//pass element to set properties
function Cookie(elem,id, kind, x, y) {
elem.id = id;
elem.kind = kind;
elem.x = x;
elem.y = y;
this.display = function () {
alert("Cookie number: " + this.id + "; is a: " + this.kind + "; cookie : " +
" and it is situated on coordinates ; " + this.y + " and " + this.x + " on the cookie pan");
}
}
Fiddle : http://jsfiddle.net/aslancods/CzgLj/
Related
I'm trying to write basic calculator in js (I'm learning) and so far i wrote something like this:
function Wprowadzanie(nacisnieto){
var temp = document.getElementById('kalkulator_linia_2').textContent;
temp = temp + nacisnieto;
document.getElementById('kalkulator_linia_2').innerHTML = temp;
}
function Dzialanie(nacisnieto){
var temp = document.getElementById('kalkulator_linia_2').textContent;
if(temp!="") document.getElementById('kalkulator_linia_1').innerHTML = document.getElementById('kalkulator_linia_1').textContent + ' ' + temp + ' ' + nacisnieto;
document.getElementById('kalkulator_linia_2').textContent = "";
}
function Rowna_Sie(){
var dzialanie = document.getElementById('kalkulator_linia_1').textContent + ' ' + document.getElementById('kalkulator_linia_2').textContent;
document.getElementById('kalkulator_linia_1').innerHTML = dzialanie + ' =';
var wynik = 0;
document.getElementById('kalkulator_linia_2').innerHTML = wynik;
}
Function Wprowadzanie is activated when a button (div) with number is pressed and gets the content of the button (0,1,2,3,etc..).
Example:
<div class="klawiatura_przycisk" onclick="Wprowadzanie(1)">1</div>
Same with function Dzialanie, it gets activated when button with +,-,* or / is pressed and gets content of that button (for example '+').
Example:
<div class="klawiatura_przycisk" onclick="Dzialanie('+')">+</div>
Function Rowna_Sie is activated when button with "=" is pressed.
<div class="klawiatura_przycisk" onclick="Rowna_Sie()";>=</div>
I tried to make function "Rowna_Sie()" calculate the content of var "dzialanie" and save it to var "wynik", but everything I tried didn't want to work. Could you please show me how to correctly finish that function?
You could use the eval function, which treats its argument as javascript code and tries to execute it. There are huge security concerns when you do this, but because the string is being built by buttons like that, and because this looks like it's just a project you're doing for fun, it should be fine. The code you need is this:
var wynik = eval(dzialanie);
I don't speak the language you named things in so it's a little hard to follow, and I may have made a small mistake in the snippet. The argument should be the string containing the equation the user has entered. So if they wanted to calculate 1+1, you need to do eval("1 + 1") to get the answer.
I have a variable called Asset1
I want everytime I click on the button that Asset1 goes to Asset2, Asset3, Asset4 etc. It increases by 1.
But I don't know how to set up a variable which can change after you click on a button. I thought of something like this.
var Asset[x]; [x]++; // after the mouseclick event
I'm stuck, can someone assist?
You can use an array like below:
var assets = []
// Add to this array
assets.push(house_location + " " + "Cost" + " " + cost + " " + "Downpay"+ " " + downpay)
// Access a particular element eg. first
assets[0]
// Check if already have a house
assets.length > 0
Increases value each time the button is clicked by calling a function.
//initialize number
var i = 0;
function clicked(n) {
//increase value by number of times clicked
i = i + n;
//get number element
var number = document.getElementById("number");
//Set number element to Document
number.innerHTML = i;
};
Codepen: https://codepen.io/AMSteffensen/pen/oNjjmaQ
I could hardly found an easier example but for some unknown reason i have problems with this few lines of code. I dynamically create buttons and add them to my container to the end.
I don't know why but only the first button is added. Please help
Code:
var buttonCount = this.getFoldersContainer().query('button').length;
var button = Ext.create('Ext.button.Button');
button.id = 'folderButton' + record.get('id');
button.setText(record.get('name') + " >>");
console.debug('count');
console.debug(buttonCount);
this.getFoldersContainer().insert(buttonCount,button);
I created a new blank project with only this functionality and it works fine. I don't have a clue what could be causing this in my existing project.
First you should be sure that all buttons get a application wide unique id!
Next is that the id should be present at construction time of the button (in your case it will not be critical but I recommend it). It makes no sense when you are saying that add() would insert at the beginning, because it always insert at the end!
// ....getFoldersContainer().query('button').length; // count all the items!!
// you may do a check if the id is unique while debugging
if(Ext.getCmp('folderButton' + record.get('id')) != null)
console.error('Id duplicated! >> ','folderButton' + record.get('id'))
var ct = this.getFoldersContainer(),
itemCount = ct.items.getCount(),
button = Ext.create('Ext.button.Button', {text:record.get('name') + " >>",id:'folderButton' + record.get('id')});
ct.insert(itemCount > 0 ? --itemCount : itemCount ,button);
// if you just want to insert at the end you will be fine with
// ct.add(button);
I'm working on an extension for Mac OS X's Safari browser. I only want this extension to execute if a few specific strings appear on the page. It should search for these strings throughout the entire HTML document.
Validation bool:
function validateStringsPresent(){
var index1 = document.documentElement.innerHTML.indexOf(validationText1);
var index2 = document.documentElement.innerHTML.indexOf(validationText2);
/* For testing purposes only */
alert("If an index = -1, it is not on the page" + "\n" + "\n"
+ index1 + "\n" + "\n"
+ index2);
if (index1 != -1 && index2 != -1) {return true};
else {return false};
}
As you've guessed, I get -1 for both indexes on a page that does contain the Validation Text. There are no special characters in these strings except for :, but that shouldn't be a factor.
My theory is that I need something other than the document class when using an extension in Safari. To get the current URL, for example, the document class didn't work either. I had to use var currentUrl = safari.application.activeBrowserWindow.activeTab.url;
I haven't been able to find the correct Safari Class to accomplish what I am trying to do, though.
Can anyone point me in the right direction?
EDIT
Now trying via injected script.
Button click function:
function performCommand(event)
{
getHTML();
}
safari.application.addEventListener("command", performCommand, true);
injected.js:
function getHTML()
{
var val1 = document.documentElement.innerHTML;
alert("You are using injected.js" + "\n" + "\n"
+ val1);
}
As you can see in the screen shots below, getHTML() is returning the HTML from my global file and not the current web page.
The is(:focus) was the aproach. The final code is listed below:
setInterval(function(){
if($j("SELECT[name='cf20_field_7']").is(":focus")) return false;
var information = '';
var i = 1;
$j("#cf20_field_1").html();
//add new information to hidden field
$j("#cforms20form .info_for_email").each(function(){
var name = $j(this).find("INPUT[name='cf20_field_5']").val();
var inn = $j(this).find("INPUT[name='cf20_field_6']").val();
var view = $j(this).find("SELECT[name='cf20_field_7']").val();
//render
information += i + ")";
information += "Наименование организации: " + name + ".<br/>\n";
information += "Реквизиты организации: " + inn + ".<br/>\n";
information += "Стоимость заказа: выписка " + view + ".<br/>\n";
i++;
})
$j("#cf20_field_1").html(information);
hovered = true;
}
,100
);
Is there some possibility to fire function when there is no hover in SELECT field.
And also there may be aproach that to check is there is no hover on SELECT field.
It cause problemms. When you are trying to select another option cursor is begging while setInterval is working.
The best approach that i find is listed below:
//every 100 mil secconds update info
setInterval(function(){
$j("SELECT[name='cf20_field_7']").trigger('change');
if ( $j("SELECT[name='cf20_field_7']").on("change")) return false;
var information = '';
var i = 1;
$j("#cf20_field_1").html();
//add new information to hidden field
$j("#cforms20form .info_for_email").each(function(){
var name = $j(this).find("INPUT[name='cf20_field_5']").val();
var inn = $j(this).find("INPUT[name='cf20_field_6']").val();
var view = $j(this).find("SELECT[name='cf20_field_7']").attr("value");
//render
information += i + ")";
information += "Наименование организации: " + name + ".<br/>\n";
information += "Реквизиты организации: " + inn + ".<br/>\n";
information += "Стоимость заказа: выписка " + view + ".<br/>\n";
i++;
})
$j("#cf20_field_1").html(information);
}
,100
);
More information:
I can discribe situation more. So i had a form. onsubmit event didn`t work because there is another event is attachet. So i deside to update value of first field of form every 100 milisecs. The value is containing all dynamictly created "selects and inputs". But when i try to change value of the select by mouse. The function is fired and function check value of select and cause mouse begging. So i need somehow to check if that select is hovered to prevent firing of the function.
Invalid here:
if ( SELECT[name='cf20_field_7'].on("change"))
I guess you need this:
if ( $("SELECT[name='cf20_field_7']").on("change"))
But still, the above is invalid. You need some handler like:
$("SELECT[name='cf20_field_7']").on("change", function(){
return false;
});
if ($j("SELECT[name='cf20_field_7']").on("change")) return false
Not clear what should be checked here. I assume you want to run some function attached to onchange even of select. In that case you should use .trigger instead of .on. But in both cases return value will be jquery object (for chaining purposes) so basically your statement will always be true both with trigger and on If you want to test some value of select, you should do something like next:
if(someTestFunct($j("SELECT[name='cf20_field_7']"))) return false;
function someTestFunct(jObj) {
//some other code?
return jObj.val() == "some value to test";
}
Possibly some better approach may be used, but without more details it is hard to suggest something.