We Keep Coding

Javascript P5 change a variable after mouseclick event

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

jQuery > Word counter: Get increasing counter value when deleting words

I am using textarea to get comments and everything.
Text area that I use has word limits or maxlength of words. Now I will let users know that how many characters you can type more.
Though this is success till now, But i've got a problem in refreshing the counter values. It doesn't show refreshed value of counter as soon as i delete characters.
Also when i do keyup then counter shows old value from where i started deleting characters.
Now if textarea is empty and i type something then counter works good.
I have got a fiddle here-
Text area counter
Steps to reproduce-
Type a longer sentence.
Now delete this sentence from textarea.
Delete all texts from textarea and start typing again, it starts from full length of words.
counter is not showing refreshed values after deleting.
This is some code of jQuery-
$(document).ready(function() {
var text_max = 300;
$('#textarea_feedback').html(text_max + ' characters remaining');
$('#textarea').keypress(function() {
var text_length = $('#textarea').val().length;
var text_remaining = text_max - text_length;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
});
});

It is because you are using keypress, use keyup event.
In Chrome and IE the keypress event will be fired only when keys which can be displayed are pressed. Key like backspace and delete do not have a display property so keypress event will not get fired.
$(document).ready(function() {
var text_max = 300;
$('#textarea_feedback').html(text_max + ' characters remaining');
$('#textarea').keyup(function() {
var text_length = $('#textarea').val().length;
var text_remaining = text_max - text_length;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
});
});
Demo: Fiddle

I've had this one before!
Trick is to use keyup() instead of keypress()
Fiddle.

Here's how I would do it to capture all changes.
Also, I would change the HTML to have a default of 300 or whatever number to start and then wrap the counter value you are changing in another element and only change its value through this function.
$(document).ready(function() {
//Don't search for it over and over again
var $cachedSelector = $('#textarea_feedback');
var $cachedTextArea = $('#textarea');
//Common function you can call repeatedly that only updates the counter
function changeTextArea(){
var text_length = $cahcedTextArea.val().length;
var text_remaining = 300 - text_length;
$cachedSelector.html(text_remaining);
}
//Handles Keyup or typing events
$cachedTextArea.keyup(function() {
changeTextArea()
});
//Handles common chage events like if someone copy/pastes into your input
$cachedTextArea.change(function() {
changeTextArea()
});
});

jquery event no change

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.

Javascript backspace functionality

I need to implement the backspace key behaviour so that my cursor is placed one position to the left without the user pressing the Backspace key, but rather after a string is added programmatically inside my (contenteditable) div, I need the cursor to move automatically one position left. I tried adding \b to my string, with no success.
How can I achieve this behaviour (preferably using JavaScript)?

You can easily workaround this by injecting a browser event into your content editable. I am showing an example using the left arrow key because you wrote that you want to move the cursor, which I would expect is what you want, because Backspace would delete a character. If you want to delete then replace the keycode for left with backspace.
Here is how it's done using jQuery:
var ev = jQuery.Event("keydown"); // Creates a new keydown event
ev.keyCode = $.ui.keyCode.LEFT; // Sets the event keyCode to be the left arrow button
$('#contentEditableContainer').trigger(ev);
To include jQuery:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>

Here is the function that I use, make sure you include jQuery. Just call this function with a id to the text box you want the backspace to act:
function backSpace(id){
var txt = $(id);
var startPos = txt[0].selectionStart;
var endPos = txt[0].selectionEnd;
var scrollPos = txt[0].scrollTop;
console.log("start: " + startPos + " end: " + endPos + " scrollPos: " + scrollPos);
if (endPos - startPos > 0){
txt.val(txt.val().slice(0, startPos) + txt.val().slice(endPos, 100));
}else if (endPos > 0){
txt.val(txt.val().slice(0, startPos-1) + txt.val().slice(startPos, 100));
}else{
startPos = txt.val().length+1;
}
txt.focus();
txt[0].setSelectionRange(startPos-1,startPos-1);
}

JavaScript drag and drop issue

Ok I have created a JavaScript page where the user can add text, they can set the colour, bold italics, as well as size and font. Size and drop options are selected through drop down boxes.
It looks a bit messy atm, as I am not worried about the looks, just the functionality.
When they add an element which appears in the widget, they can drag the element into position onto an image I have created which is displayed on the screen. Whenever the user is happy with the position of the text, they click save which generates the coordinates and updates the table X and Y coordinates field, At this point, a new row is generated and they can repeat the process of adding a new element. Whenever they are happy, they click save and it will send to a database to store it to be retrieved later.
My problem is everytime I add a new text field, it pushes the element down by a certain amount.
I rectified this by adding a decrementing variable which takes the elementCount (which autoincrements every time they add a new label element) and multiply it by a set amount to decrement by
decr -= (elementCount* 16);
This works fine for the medium text size, however when you start adding different text sizes and font combinations, it will change how much the element gets pushed down so it gets worse and worse every other element you add.
The new element is added like this
elementCount++;
var Text = textArray[textArray.length-1];
var Font = fontArray[fontArray.length-1];
var Color = colorArray[colorArray.length-1];
var Bold = boldArray[boldArray.length-1];
var Size = sizeArray[sizeArray.length-1];
var Italics = italicsArray[italicsArray.length-1];
var X = xCordArray[xCordArray.length-1];
var Y = yCordArray[yCordArray.length-1];
var newdiv = document.createElement('div');
newdiv.innerHTML = "<span><font color='" + Color + "' size = '" + Size + "' face='" + Font + "'><label class = 'drag2' id = 'text" + firstCount + "'> " + Text + "</label></font></span>";
document.getElementById(divName).appendChild(newdiv);
var decr= 32;
decr-= (elementCount* 16);
Y = parseInt(Y) + test;
X = parseInt(X) + 24;
document.getElementById("text" + elementCount).style.left = X + "px";
document.getElementById("text" + elementCount).style.top = Y + "px";
The drag and drop JavaScript code was based on this tutorial
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx
Is there any way to make it so when you dynamically add a new element , it doesn't automatically push it down the screen by a bit each new element you add. I have tried soo many different options to fix this over the past few days and have had no luck.
Thanks in advance for any help
Edit CSS for the text element
.text1{
position: relative;
left: 0px;
top: 0px;
}

I changed to absolute positioning and placed it inside a relative positioned container and works perfectly now!!