Develop Reference

Stop taking input in text-field (tag input)

I am taking some tags name like "study","reading" something like that in the textfield with the help of Bootstrap 4 Tag Input Plugin With jQuery - Tagsinput.js and I have also some predefine tags name contain by buttons. If I click the button then the count of the tag's will increase (count++) and again click this button count will decrease(count--). Same rules for the text-field tags and the total count of the tags in both fields (text and buttons)<=5.
I can count the total tags of the both field but can't stop taking input in text-field when it is greater than 5.
html
<button class="btnr btnr-tags-optional" id="1" onclick="tagSelect(this.id)" >1</button>
<button class="btnr btnr-tags-optional" id="2" onclick="tagSelect(this.id)" >2</button>
<button class="btnr btnr-tags-optional" id="3" onclick="tagSelect(this.id)" >3</button>
My Js
var tagsCount = 0;
var store = 0;
var total_tags = 0;
function tagSelect(clicked_id) {
if (total_tags < 5) {
var tags = document.getElementById(clicked_id);
if (tags.style.borderColor == "rgb(255, 72, 20)") {
tags.style.borderColor = "";
tagsCount--;
} else if (tags.style.borderColor == "") {
tags.style.borderColor = 'rgb(255, 72, 20)';
tagsCount++;
}
total_tags = store + tagsCount;
}
console.log(total_tags);
}
$('#tags_text').on('change', function() {
if (total_tags >= 5) {
$("#tags_text").attr('readonly');
console.log('condition')
} else {
$("#tags_text").removeAttr('readonly');
var items = $("#tags_text").tagsinput('items').length;
store = items;
total_tags = store + tagsCount;
console.log(total_tags);
}
});
Here is the example in jsfiddle

This problem is solved.
I have changed the maxTags value of the plugin with the change of the tags click.
window.tagsCount = 0;
var store = 0;
var total_tags = 0;
function tagSelect(clicked_id) {
var r = ("#" + clicked_id).toString();
if (total_tags < 5) {
if ($(r).hasClass("classActiveIssue")) {
$(r).removeClass("classActiveIssue");
window.tagsCount--;
} else {
$(r).addClass("classActiveIssue");
window.tagsCount++;
}
} else {
if ($(r).hasClass("classActiveIssue")) {
$(r).removeClass("classActiveIssue");
window.tagsCount--;
}
}
total_tags = store + tagsCount;
$("#optionsleft").text(total_tags + "/5 selected");
//console.log("total",total_tags);
}
$('#tags_text').on('change', function() {
var items = $("#tags_text").tagsinput('items').length;
store = items;
total_tags = store + tagsCount;
});
and add the line in add:
self.options.maxTags = 5 - window.tagsCount;
Here is the fiddle

how to change the css of the parent div in javascript not jquery

I want to change the CSS of a parent div if I click the child of its parent div, not, for example if I click href tag. I want to change the CSS of its class="changed_area".
How can I do this?
var up_btn = document.getElementsByClassName('up_btn');
var up_btn_length = up_btn.length;
var changed_area = document.getElementsByClassName('changed_area');
var changed_area_length = changed_area.length;
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function() {
//alert('welcome');
for (var i = 0; i < changed_area_length; i++) {
if (changed_area[i].style.top == '-100%') {
changed_area[i].style.top = '0%';
}
else {
changed_area[i].style.top = '-100%';
}
}
});
}
<?php foreach($questions As $question): ?>
<div class="changed_area" style="width: 100px;">
<div class="inside_ajax_part1">
<div id="inside_left">
<img src="<?php echo $Filter_customer->image; ?>" />
</div>
<div id="inside_right">
<a class="up_btn" href="#">Up</a>
</div>
</div>
<div class="inside_ajax_part2">
<p>mohammed</p>
</div>
</div>
<?php endforeach; ?>

I think you can do something like this : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
EDIT : better way to do this
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function(){
var changed_area = up_btn[i].parentElement;
if ( changed_area.classList.contains('changed_area') ) {
changed_area.classList.remove('changed_area')
}
else {
changed_area.classList.add('changed_area')
}
if(changed_area.style.top == '-100%') {
changed_area.style.top = '0%';
}
else {
changed_area.style.top = '-100%';
}
});
}

Just add event listener on parent and use currentTarget
const parent = document.getElementsByClassName('changed_area');// select parent
for (var i = 0; i < parent.length; i++) {
parent[i].addEventListener('click', (ev) => ev.currentTarget.className = 'clicked');
}
Here is fiddle for it

Your code affects all of your divs with class "changed_area", That I don't think it is what you intend.
To access a parent element with javascript you can use parentElement. To get the parent of parent of parent.... that meets some condition (like having a class) you can do this:
function Get_changed_area(targetElement){
var parent = targetElement.parentElement;
if(parent.hasClass('changed_area'))
return parent;
else Get_changed_area(parent) //repeat the function for parent
}
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function() {
changed_area = Get_changed_area(up_btn[i]);
if (changed_area.style.top == '-100%') {
changed_area.style.top = '0%';
}
else {
changed_area.style.top = '-100%';
}
}
}

Add space after dot

Good day. I've got some problem.
I've got input where I wrote some information.
Example:
<div class="wizard wizardstep1" ng-controller='someCtrl'>
<p class="wizardtitle">Put you Theme</p>
<input id="taskTheme" required type="text" placeholder="Put you Theme" ng-model="taskThemeWizardInputValue" ng-change="checkThemeWizardInputValue()">
</div>
And I've got my controller.
Example:
$scope.checkThemeWizardInputValue = function () {
if ($scope.taskThemeWizardInputValue === undefined) {
$scope.taskThemeWizardInputValue = "";
console.log($scope.taskThemeWizardInputValue);
console.log($scope.taskThemeWizardInputValue.length);
} else {
var strt = $scope.taskThemeWizardInputValue.split('.');
for (var i = 0 ; i < strt.length; i++) {
strt[i] = strt[i].charAt(0).toUpperCase() + strt[i].substr(1);
}
$scope.taskThemeWizardInputValue = strt.join('.');
console.log($scope.taskThemeWizardInputValue);
console.log(strt);
}
}
How I can add space after dot? Who knows?
Here is link to jsfiddle with my example.

We achieve it by adding space to each splitted string other than first one and an empty string
function someCtrl($scope) {
$scope.checkThemeWizardInputValue = function () {
if ($scope.taskThemeWizardInputValue === undefined) {
$scope.taskThemeWizardInputValue = "";
console.log($scope.taskThemeWizardInputValue);
console.log($scope.taskThemeWizardInputValue.length);
} else {
var strt = $scope.taskThemeWizardInputValue.split('.');
for (var i = 0 ; i < strt.length; i++) {
var addSpace='';
if(i>0 && strt[i].trim().length>0){
addSpace=' ';
}
strt[i] = addSpace+strt[i].trim().charAt(0).toUpperCase() + strt[i].trim().substr(1);
}
$scope.taskThemeWizardInputValue = strt.join('.');
console.log($scope.taskThemeWizardInputValue);
console.log(strt);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="wizard wizardstep1" ng-controller='someCtrl'>
<p class="wizardtitle">Put you Theme</p>
<input id="taskTheme" required type="text" placeholder="Put you Theme" ng-model="taskThemeWizardInputValue" ng-change="checkThemeWizardInputValue()">
</div>
</div>

You can do this simply by changing strt.join('.') to strt.join('. ').

$scope.checkThemeWizardInputValue = function () {
if ($scope.taskThemeWizardInputValue === undefined) {
$scope.taskThemeWizardInputValue = "";
console.log($scope.taskThemeWizardInputValue);
console.log($scope.taskThemeWizardInputValue.length);
} else {
var strt = $scope.taskThemeWizardInputValue.split('.');
for (var i = 0 ; i < strt.length; i++) {
strt[i] = strt[i].trim();
if(strt[i].length > 0) {
strt[i] = ' '+strt[i].charAt(0).toUpperCase() + strt[i].substr(1);
}
}
$scope.taskThemeWizardInputValue = strt.join('.');
console.log($scope.taskThemeWizardInputValue);
console.log(strt);
}
}
This is working fiddle

I suggest creating a directive so that you can plugin this behaviour whenever required., rather than writing your ng-change in every controller.
In directive simple line element.val(event.target.value.split(".").join(". ")); will work for you., with help of directive controller parameter.
See example fiddle

I am having trouble with resetting the counter in jquery (clickfunction)

I am trying to repeat the clickfunction but it will only repeat twice. After that the counter disappears. I don't know what the cause of this is. H
var divClone = $("#target").clone();
var divClone = $("#output").clone();
var clickCount = 0;
$('#target').click(function() {
if ( clickCount < 6){
clickCount++;
$('#output').html(function(i, val) { return val*1+1 });
} else {
clickCount = 0;
$("#output").replaceWith(divClone);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="target" type="button">Click Me</button>
<div id="output">0</div>
Note that I am quite new to programming.
Thanks in advance.
Edit: Sorry, I don't want it to be automatic. After every 6 clicks the counter should reset to zero.

Try this
http://jsfiddle.net/zRX2D/2707/
var clickCount = 0;
$('#target').click(function() {
if ( clickCount < 6){
clickCount++;
} else {
clickCount = 0;
}
$('#output').html(clickCount);
});

Try this:
var clickCount = 0;
$('#target').click(function() {
if (clickCount++ < 6) {
$('#output').html(function(i, val) {
return val * 1 + 1
});
} else {
clickCount = 0;
$('#output').html('0');
}
});
Demo: https://jsfiddle.net/tusharj/zRX2D/2708/
OR
Simple:
var clickCount = 0;
$('#target').click(function () {
$('#output').html(++clickCount % 7);
});
Demo: https://jsfiddle.net/tusharj/zRX2D/2711/

Check following:
var clickCount = 0;
$('#target').click(function() {
clickCount = clickCount < 6 ? clickCount+=1 : 0;
$("#output").text(clickCount);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="target" type="button">Click Me</button>
<div id="output">0</div>

Push value to array onclick and loop to add array values. Javascript

So i am pretty new at this and want to be able to add a dollar to the "deposit" text box every time I click the button. I'm going to have to do this with a quarter, dime, and nickel, button as well. This is what I have so far.
<input type="button" value="Dollar" id="dollar" />
$<input type="text" id="deposit" />
And the javascript is:
var $ = function (id) { return document.getElementById(id); }
var item = [];
var total = 0;
for (i=0; i < item.length; i++){
total += item[i];
$("deposit").value = total;
}
$("dollar").onclick = item.push(1);
Whatever help you can give is much appreciated!

Don't you mean
Live Demo
var $ = function (id) { return document.getElementById(id); }
var add = function(fld,val) {
return (parseFloat(fld.value)+val).toFixed(2);
}
window.onload=function() {
$("dollar").onclick=function() {
$("deposit").value = add($("deposit"),1);
}
$("dime").onclick=function() {
$("deposit").value = add($("deposit"),.1);
}
$("nickel").onclick=function() {
$("deposit").value = add($("deposit"),.05);
}
$("refund").onclick = function() {
$("deposit").value = "0.00";
}
}

Try this:
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#1.9.1" data-semver="1.9.1" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<input type="button" value="Dollar" id="dollar" />
$ <input type="text" id="deposit" />
</body>
</html>
JavaScript:
$(function() {
var item = [];
$("#dollar").click(function() {
item.push(1);
var total = 0;
for (var i = 0; i < item.length; i++) {
total += item[i];
$("#deposit").val(total);
}
});
});
Plunker example