Should be a matching if Statement (Textarea & Div)

Should be a matching if Statement (Textarea & Div) - javascript

I want to click on an item in the removeFood div and have it match to the item in the text area newFoodName1
$(".removeFood").click(function() {
var removedFood = ($(this).children('.dailyItem').text())
$(this).text('')
var selectedFood = $("#newFoodName1").text();
console.log(removedFood + selectedFood)
if (removedFood == selectedFood) {
console.log('They Match')
} else {
console.log('they dont match')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='removeFood'>
<p class='dailyItem'>
Eclair
<i class="fas fa-trash-alt"></i>
</p>
</div>
<textarea id='newFoodName1'>Eclair</textarea>
In the console this logs Eclair Eclair However the if statement says they do not match. What am I missing?

They do not match because of the whitespace around the values. If you use trim() to remove that, then the if condition is matched:
$(".removeFood").click(function() {
var removedFood = ($(this).children('.dailyItem').text())
$(this).text('')
var selectedFood = $("#newFoodName1").text();
console.log(removedFood + selectedFood)
if (removedFood.trim() == selectedFood.trim()) {
console.log('They Match')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='removeFood'>
<p class='dailyItem'>
Eclair
<i class="fas fa-trash-alt"></i>
</p>
</div>
<textarea id='newFoodName1'>Eclair</textarea>

just trim your data using trim()
$(".removeFood").click(function() {
var removedFood = ($(this).children('.dailyItem').text().trim())
$(this).text('')
var selectedFood = $("#newFoodName1").text().trim();
console.log(removedFood + selectedFood)
if (removedFood == selectedFood) {
console.log('They Match')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='removeFood'>
<p class='dailyItem'>
Eclair
<i class="fas fa-trash-alt"></i>
</p>
</div>
<textarea id='newFoodName1'>Eclair</textarea>

Related

Change Font Awesome Icon Only

I am trying to change the icon from chevron-down to chevron-up when clicked. Currently, it shows "Categories" and "Hide" when clicked. I would like to have it say "Categories" the whole time. Is that possible?
Here is the code:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
<i class="fa fa-chevron-down"></i> Categories
</h1>
<div id="showhide" style="display:none;">
<ul>
<li>Hello World
</li>
</ul>
</div>
JS
function arata_ascunde(h1) {
var x = $('#showhide');
$(h1).find('i').remove();
if ($(h1).text().trim() == 'Categories') {
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Hide ');
x.fadeIn();
}
else {
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
x.fadeOut();
}
}
CodePen: https://codepen.io/chadwicked123/pen/porRoOq

Your "if condition" is on something that can't be detected if it will be the same in all conditions. So it's better to change your condition to something more specific, like the tag's class. like this :
function arata_ascunde(h1) {
var x = $('#showhide');
if ($(h1).find('i').hasClass('fa-chevron-down')) {
$(h1).find('i').remove();
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).append(' Categories');
x.fadeIn();
} else {
$(h1).find('i').remove();
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).append(' Categories');
x.fadeOut();
}
}
I changed a few things to make your result more beautiful. This code still can be improved (I'm not a front-end developer).

I used basic javascript and some logic to change the HTML based on a class
Here's the codepen for it - Link
Here's the edited JS file :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
Categories<i class="fa fa-chevron-down"></i>
</h1>
<div id="showhide" style="display:none;">
<ul>
<li>Hello World
</li>
</ul>
</div>
and the edited JS file
function arata_ascunde(h1) {
var x = $('#showhide');
$(h1).find('i').remove();
if (document.querySelector("h1").classList.contains("down")) {
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Categories ');
document.querySelector("h1").classList.remove("down")
x.fadeIn();
}
else {
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
document.querySelector("h1").classList.add("down")
x.fadeOut();
}
}

To Do list with check button

I want to make my own To Do list using JavaScript and localStorage. After writing the input and pressing the send button, the item will be added and display on the screen. A check button will appear next to the item. After pressing the check button, I want the class to be added. I want add css (opacity, line...). But when I press a check button, the console shows this error: Uncaught TypeError: Cannot read properties of undefined (reading 'add')
at check (app.js:23)
at HTMLElement.onclick (index.html:30)
HTML code:
<body>
<div class="main">
<input id="item" type="text">
<i id="addItem" class="fas fa-plus"></i><br> <br>
</div>
<div class="items">
<div id="addedItems"></div>
</div>
<i onclick='deleteAll()' class="fas fa-trash"></i>
</body>
JS code:
const item = document.getElementById("item");
const add = document.getElementById("addItem");
const addedItems = document.getElementById("addedItems");
add.onclick = function() {
const itemValue = item.value;
const itemValue2 = ' ';
if (itemValue && itemValue2) {
localStorage.setItem(itemValue, itemValue2);
location.reload();
}
};
for (let a = 0; a < localStorage.length; a++) {
const itemValue = localStorage.key(a);
addedItems.innerHTML += `<div class= 'text'> <div>${itemValue}</div> <div>
<i onclick='check("${itemValue}")' class="fas fa-check"></i><i
onclick='deleteItem("${itemValue}")' class="fas fa-trash-alt"></i>
</div></div> <br>`;
}
function check(itemValue) {
itemValue.classList.add("mystyle");
}
function deleteItem(itemValue) {
localStorage.removeItem(itemValue);
location.reload();
}
function deleteAll() {
localStorage.clear();
location.reload();
}

You can try this answer:
<script>
const item = document.getElementById("item");
const add = document.getElementById("addItem");
const addedItems = document.getElementById("addedItems");
add.onclick = function() {
const itemValue = item.value;
const itemValue2 = ' ';
if (itemValue && itemValue2) {
localStorage.setItem(itemValue, itemValue2);
location.reload();
}
};
for (let a = 0; a < localStorage.length; a++) {
const itemValue = localStorage.key(a);
addedItems.innerHTML += `<div class= 'text'> <div>${itemValue}</div> <div>
<i onclick='check("${itemValue}", ${a})' class="fas fa-check" id="${a}"></i><i
onclick='deleteItem("${itemValue}")' class="fas fa-trash-alt"></i>
</div></div> <br>`;
}
function check(itemValue, id) {
const elem = document.getElementById(id);
elem.classList.add("mystyle");
}
function deleteItem(itemValue) {
localStorage.removeItem(itemValue);
location.reload();
}
function deleteAll() {
localStorage.clear();
location.reload();
}
</script>
<div class="main">
<input id="item" type="text">
<i id="addItem" class="fas fa-plus"></i><br> <br>
</div>
<div class="items">
<div id="addedItems"></div>
</div>
<i onclick='deleteAll()' class="fas fa-trash"></i>
Only changes I made is pass id of element for checkbox click along with itemValue element. Value you are passing checkbox value not document element. If you console you will get to know itemValue is just string not DOM element.
Here is fiddle : https://jsfiddle.net/aviboy2006/ortqu1ps/

Uncollapse a link back to the default text

This collapse code works fine but I wish to get back the same message when a user does a un-collapse by clicking the link.
Code:
<div class="expandContent searchfont"> <i class='icon-search' title='Click here to search.'></i> SEARCH CANDIDATES</div>
<div class="showMe" style="display:none">
<script type="text/javascript">
$(document).ready(function() {
$(".expandContent").click(function() {
$(".showMe").slideToggle("slow");
if ($("#toggleText").text() === "SEARCH") {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> -</span>`);
} else {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> FILTER SEARCH</span>`);
}
});
});
</script>
All I want is when I use click on Filter Search then the div uncollapse and message should be search candidates.

Everything was fine except
$("#toggleText").text() === "SEARCH" will be changed by $("#toggleText").text() === " FILTER SEARCH"
In case the text is filter search, the next text will be changed in search candidate
$(document).ready(function() {
$(".expandContent").click(function() {
$(".showMe").slideToggle("slow");
if ($("#toggleText").text() === " FILTER SEARCH") {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i>SEARCH CANDIDATES<span id="toggleText"> -</span>`);
} else {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> FILTER SEARCH</span>`);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="expandContent searchfont"> <i class='icon-search' title='Click here to search.'></i> SEARCH CANDIDATES</div>
<div class="showMe" style="display:none">Below content</div>

How to increment the counter value when the input field is filled?

This is my laravel view code. Here,I am trying to increment the counter value(ie.,value="0/5") . I have the input fields inside the modal and when clicking on the save button which is inside the model, the value should get incremented based on the filled input fields.ie(1/5..2/5..)
I have tried to increment those counter value.But it displays NaN
var val;
$("input").click(function() {
val = $('#counter').val();
val++;
$('#counter').prop('value', val)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none">
</div>

<script type="text/javascript">
$("input").click(function() {
let val = parseInt($('#counter').val().split('/')[0]);
$('#counter').prop('value', `${++val}/5`);
});
</script>

Actually your code is working fine. Since you have the view inside a modal, which is only displayed or shown on a click event, you should use the jQuery "on" method to enhance your click handler function definition. In that case you should have your code working
var val;
$(document).on('click','#counter',function()
{
val = $('#counter').val();
val++;
$('#counter').prop('value',val )
});
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i>
Price,stock and Shipping Information<input type="submit" id="counter"
**value="0/5"** style="background-color: transparent; border:none">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

You can use regular expression to parse data before / character
var val;
$("input").click(function() {
val = $('#counter').val();
qty = val.match(/[^/]*/i)[0];
qty++;
$('#counter').prop('value', qty)
});

If you want to increase like this 1/5..2/5 .Use split and increase only upper value .
var val;
$("input").click(function() {
val = $('#counter').val().split("/");
//check eqal value with base
if(val[0] == val[1]) {
return false;
}
val[0]++;
$('#counter').prop('value', val[0]+"/"+val[1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none">
</div>

Here is your solution:
$("input").click(function() {
var val = $('#counter').val();
$('#counter').prop('value', `${++val % 6}/5`);
});
And a working fiddle:
https://jsfiddle.net/wv2x0mx5/4/

You can also try this.
$("#counter").on("click",function(){
var counterBtn = document.getElementById("counter");
var count = counterBtn.value;
//alert(count.split("/")[0]);
count = count.split("/");
counterBtn.value = ((parseInt(count[0])+1)%(parseInt(count[1])+1))+"/"+count[1];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none">
</div>

opening the text box is working only first time api call, second time text box is not getting open

I have a question & aanswer module, on clicking to write an answer to a question, first time the answer box opens and after submitting the answer, When I again open the answer text box, It doesn't opens.
My HTML Code
<li class="question answered" id="unansweredBlock" ng-if="unanswered_Que.length !==0">
<div class="qstn" id="qBlock-{{questions.question_id}}" ng-repeat="questions in unanswered_Que">
<span class="qstn-icon qicon"></span>
<div>
<div class="qmeta">
<div>Asked by {{questions.asked_by}} on {{questions.asked_at}}</div>
</div>
<h4>{{questions.question}}</h4>
</div>
<div id="ansId-{{questions.question_id}}" class="qbottom">
Write your answer
</div>
<hr class="seperator">
<div class="sendAnswer" ng-show="selectedAnswerPanel== $index" ng-hide="selectedAnswerPanel != $index">
<div class="sndAnswer">
<form action="">
<div class="form-group">
<h5>EXPERTS ANSWER</h5>
<textarea id="answer_Text{{$index}}" ng-model="answerText" placeholder="Write your comments" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" ng-click="answer_Que(questions,'answer_Text'+$index);">Send your Answer</button>
</div>
</form>
</div>
</div>
</div>
My JS Code
$scope.showHideAnswerPanel = function(index) {
if ($rootScope.isUserLoggedIn == true) {
if ($scope.selectedAnswerPanel == index) {
$scope.selectedAnswerPanel = -1
} else {
$scope.selectedAnswerPanel = index;
}
} else {
$rootScope.openLogin();
}
};
and another function is:-
$scope.answer_Que = function(unanswered_Que, answerExp) {
var requestParam = {
"uid": lclStorage.get('userData')[0].uid,
"token_key": lclStorage.get('userData')[0].token_key,
"question_id": unanswered_Que.question_id,
"answer": $("#" + answerExp).val()
}
appServices.doAPIRequest(appSettings.appAPI_ci.answeraQue.sendAnswer, requestParam, null, 'userData')
.then(function(data) {
});
if ($scope.unanswered_Que.length == 1) {
$("#answer_Text").val(" ");
$(".sendAnswer").hide();
$("#unansweredBlock").remove();
} else if ($scope.unanswered_Que.length > 1) {
$("#answer_Text").val(" ");
$(".sendAnswer").hide();
$("#qBlock-" + unanswered_Que.question_id).remove();
} else {
$("#answer_Text").val(" ");
$(".sendAnswer").hide();
}
};

Develop Reference

JavaScript is the programming language of the Web.

Should be a matching if Statement (Textarea & Div) - javascript

Related

Change Font Awesome Icon Only

To Do list with check button

Uncollapse a link back to the default text

How to increment the counter value when the input field is filled?

opening the text box is working only first time api call, second time text box is not getting open

Categories

Resources