How do you add css class to the first div(see below) if the span inside that div is "Yes". This div does not have an id. How do you search for this div and modify.
<div class="dx-button dx-button-normal dx-widget dx-button-has-icon dx-button-has-text" role="button" aria-label="Yes" tabindex="0">
<div class="dx-button-content">
<span class="dx-button-text">Yes</span>
</div>
</div>
how about this?
var dxBtnText = document.querySelector('.dx-button-text').textContent;
if (dxBtnText == 'Yes') {
document.querySelector('.dx-button').classList.add('new-class-name');
}
I cannot apply DevExtreme css to the button, I tried with <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.5/css/dx.common.css" /> but it does not load, but the below code in theory should work:
let btnElement = $('.dx-button');
let btnText = $(".dx-button-text").text();
console.log(btnText)
if (btnText == 'Yes') {
btnElement.addClass("dx-button-yes");
}
.dx-button-yes {
background-color: lightBlue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- dunno how to include DevExtreme in order to have your css -->
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.5/css/dx.common.css" />
<div class="dx-button dx-button-normal dx-widget dx-button-has-icon dx-button-has-text" role="button" aria-label="Yes" tabindex="0">
<div class="dx-button-content">
<span class="dx-button-text">Yes</span>
</div>
</div>
var dxBtnText = document.querySelectorAll(".dx-button-text");
dxBtnText.forEach(element => {
if (element.innerText == "Yes") {
element.parentNode.parentNode.classList.add("your-new-class-name");
}
});
Related
OK so i make a modal in which i insert the options to alter the card properties like name, description and company. It's actually working fairly well except that when i open another modal without refreshing the page it doubles (then triplicates and so on) the number of requests it sends. And i dont know why. I'll link a video of my screen just so i can make myself more clear.
https://www.veed.io/view/17448fc2-7068-4419-87a2-395c528bbffa?sharingWidget=true&panel=share
here's the part of my code i think is important
function getAllDepartmentHandleButton() {
const allDeleteButtons = document.querySelectorAll('.departmentContainer__content--card')
allDeleteButtons.forEach(e => {
e.addEventListener('click', (event) => {
//console.log(event)
if(event.target.classList.value == 'remove') {
showRemoveDepartmentModal(event.target.id, event.target.alt)
} else if(event.target.classList.value == 'edit') {
showEditDepartmentModal(event.target.id)
}
})
})
}
async function showEditDepartmentModal(departmentId) {
let companyToEditid = 0
const allDepartments = await getAllDepartments()
const editModal = document.querySelector('.editDepartmentModal')
const closeBtn = document.querySelector('.editDepartmentModal__container > img')
const nameInput = document.querySelector('.editDepartmentModal__container--departmentName')
const descriptionInput = document.querySelector('.editDepartmentModal__container--departmentDescription')
const selectedCompanyInput = document.querySelector('.editDepartmentModal__container--company > span')
const placeToAppend = document.querySelector('.editDepartmentModal__container--list')
const showCompanyOptionsButton = document.querySelector('.editDepartmentModal__container--company')
const dialogCompanyOptions = document.querySelector('.editDepartmentModal__container > dialog')
const allCompanies = await getAllCompanies()
const buttonSaveAlterations = document.querySelector('.editDepartmentModal__container--button')
allCompanies.forEach(e => {
placeToAppend.insertAdjacentHTML('beforeend', `
<li id="${e.uuid}">${e.name}</li>
`)
})
editModal.showModal()
const selectedCompany = allDepartments.find(e => {
if (e.uuid == departmentId) {
return e
}
})
closeBtn.addEventListener('click', () => {
editModal.close()
})
nameInput.value = selectedCompany.name
descriptionInput.value = selectedCompany.description
selectedCompanyInput.innerText = selectedCompany.companies.name
selectedCompanyInput.id = departmentId
showCompanyOptionsButton.addEventListener('click', ()=> {
if(dialogCompanyOptions.open) {
dialogCompanyOptions.close()
} else {
dialogCompanyOptions.show()
}
})
placeToAppend.addEventListener('click', (event) => {
companyToEditid = event.target.id
selectedCompanyInput.innerText = event.target.innerText
dialogCompanyOptions.close()
})
buttonSaveAlterations.addEventListener('click', () => {
if(nameInput.value == '' || descriptionInput.value == '') {
alert('vazio')
} else {
editDepartmentFunction(nameInput.value, descriptionInput.value, companyToEditid)
editModal.close()
}
})
}
function editDepartmentFunction(test1, test2, test3) {
console.log(test1, test2,test3)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../styles/globalStyles.css">
<link rel="stylesheet" href="../styles/indexStyles.css">
<link rel="stylesheet" href="../styles/AdminPageStyling copy.css">
<link rel="stylesheet" href="../styles/adminPagesModal.css">
</head>
<body>
<header>
<div class="titleAndMenuIcon">
<span><span class="titleAndMenuIcon__bulelt">• </span>Kenzie Empresas</span>
<button>Logout</button>
</div>
</header>
<main>
<div class="departmentContainer">
<div class="departmentContainer__header">
<span class="departmentContainer__header--title">Departamentos</span>
<div class="departmentContainer__header--companiesSelect">
<span class="">Selecionar Empresa</span>
<img src="../files/down-arrow-svgrepo-com.svg" alt="">
</div>
<dialog class="departmentContainer__header--companiesModal">
<ul>
</ul>
</dialog>
<div class="departmentContainer__header--create"><img src="../files/plusIcon.svg" alt=""><span>Criar</span></div>
</div>
<div class="departmentContainer__content">
</div>
</div>
<div class="userContainer">
<div class="userContainer__header">
<span class="userContainer__header--title">Usuários Cadastrados</span>
</div>
<div class="userContainer__content">
</div>
</div>
</main>
<dialog class="createDepartmentModal">
<div class="createDepartmentModal__container">
<img src="../files/closebtnsvg.svg" alt="">
<span class="createDepartmentModal__container--title">Criar Departemento</span>
<input type="text" class="createDepartmentModal__container--departmentName" placeholder="Nome do Departamento">
<input type="text" class="createDepartmentModal__container--departmentDescription" placeholder="Descrição">
<div class="createDepartmentModal__container--company">
<span>Selecionar Empresa</span>
<img src="../files/down-arrow-svgrepo-com.svg" alt="">
</div>
<dialog class="createDepartmentModal__container--company__modal">
<ul class="createDepartmentModal__container--company__modal--container">
</ul>
</dialog>
<span class="createDepartmentModal__container--button">Criar Departamento</span>
</div>
</dialog>
<dialog class="removeDepartmentModal">
<div class="removeDepartmentModal__container">
<span>mensagem aqui</span>
<div>Continuar</div>
<img src="../files/closebtnsvg.svg" alt="">
</div>
</dialog>
<dialog class="editDepartmentModal">
<div class="editDepartmentModal__container">
<dialog><ul class="editDepartmentModal__container--list"></ul></dialog>
<img src="../files/closebtnsvg.svg" alt="">
<span class="editDepartmentModal__container--title">Editar Departamento</span>
<input type="text" class="editDepartmentModal__container--departmentName" placeholder="Novo Nome do Departamento">
<input type="text" class="editDepartmentModal__container--departmentDescription" placeholder="Nova Descrição">
<div class="editDepartmentModal__container--company">
<span>Selecionar Empresa</span>
<img src="../files/down-arrow-svgrepo-com.svg" alt="">
</div>
<dialog class="editDepartmentModal__container--company__modal">
<ul class="editDepartmentModal__container--company__modal--container">
</ul>
</dialog>
<span class="editDepartmentModal__container--button">Salvar Alterações</span>
</div>
</dialog>
</body>
<script src="../scripts/AdminPageScript.js"></script>
</html>
I tried literally everything but the only thing that actually made it stop was refreshing the page. Which, of course, is not a propper alternative
You are adding event listeners in the same function(showEditDepartmentModal) you are using to show the modal.
You have two options. One, clear the event listeners when the modal closes. Two, add the event listeners outside of showEditDepartmentModal.
I would go with number two. Your showEditDepartmentModal is too big. Try to break it down into smaller parts. It's name is "showEditDepartmentModal" but it does more than that - not a great idea.
You are adding event listener n times most probably, not only one time.
Option 1 (better):
Be sure addEventListener is called only one time, in document ready or something similar.
Option 2 (worse, use it if you can't use option 1):
Change this:
allDeleteButtons.forEach(e => {
e.addEventListener('click', (event) => {
//console.log(event)
if(event.target.classList.value == 'remove') {
showRemoveDepartmentModal(event.target.id, event.target.alt)
} else if(event.target.classList.value == 'edit') {
showEditDepartmentModal(event.target.id)
}
})
})
With something similar to this:
function clickFunction(event) {
//console.log(event)
if(event.target.classList.value == 'remove') {
showRemoveDepartmentModal(event.target.id, event.target.alt)
} else if(event.target.classList.value == 'edit') {
showEditDepartmentModal(event.target.id)
}
}
allDeleteButtons.forEach(e => {
e.removeEventListener('click', clickFunction);
e.addEventListener('click', clickFunction);
})
I found a this post and reduce the working example to an input field where a number is displayed and two buttons where you can in- and decrease the value of integer by click as you can see here.
...
<input type="text" name="quantity" size="2" value="1" />
...
<div class="quantity-wrapper pull-left">
<span class="add-up add-action fa fa-plus"></span>
<span class="add-down add-action fa fa-minus"></span>
</div>
...
$(document).ready(function () {
$(".quantity-adder .add-action").click(function () {
if ($(this).hasClass('add-up')) {
var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
text.val(parseInt(text.val()) + 1);
} else {
var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
if (parseInt(text.val()) > 1) {
text.val(parseInt(text.val()) - 1);
}
}
});
});
I want to add a kendo dropdownlist as I tried in this link. But the +/- buttons are missing. Can someone pls tell me how to fix that?
I believe you are looking for something like this. Try this in the Telerik DOJO. I'll leave the CSS stuff to you. If you are going to reuse this functionality then I'd suggest creating this into a custom Widget. See Kendo documentation for extending the Widget class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<input id="dropdownlist" />
<input type="text" name="quantity" size="2" value="1" />
<div class="quantity-wrapper">
<button class="up">+</button>
<button class="down">-</button>
</div>
<script>
$(document).ready(function() {
var $quantity = $("[name=quantity]");
$("#dropdownlist").kendoDropDownList({
dataSource: {
data: ["Banana", "Lemon"]
}
});
$(".quantity-wrapper").on("click", "button", function () {
var quantity = parseInt($quantity.val());
if ($(this).hasClass("up")) {
$quantity.val(quantity + 1);
} else {
if (quantity > 1) {
$quantity.val(quantity - 1);
}
}
});
});
</script>
<style>
.quantity-wrapper {
display: inline-grid;
}
</style>
</body>
</html>
Just add buttons instead of span
<div class="quantity-wrapper pull-left">
<button class="add-up add-action fa fa-plus">+</button>
<button class="add-down add-action fa fa-minus">-</button>
</div>
I've been trying to fix this for a while now, when my side-bar is inside a tag it stops working.
HTML:
<nav class="aptest-sidenav aptest-collapse aptest-white aptest-animate-left" style="z-index:3;width:300px;" id="mySidenav">
<br />
<div class="aptest-container aptest-row">
<div class="aptest-col s4">
<img src="/aptestimages/avatar2.png" class="aptest-circle aptest-margin-right" style="width:46px" />
</div>
<div class="aptest-col s8">
<span>Welcome, <strong><asp:Label runat="server" ID="Name_txt" Text="" /></strong></span><br />
</nav>
<div class="aptest-overlay aptest-hide-large aptest-animate-opacity" onclick="aptest_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="aptest-main" style="margin-left:300px;margin-top:43px;">
</div>
CSS:
#media screen and (max-width:992px){.aptest-sidenav.aptest-collapse{display:none}.aptest-main{margin-left:0!important;margin-right:0!important}}
#media screen and (min-width:993px){.aptest-sidenav.aptest-collapse{display:block!important}}
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
var mySidenav = $("#mySidenav");
var overlayBg = $("#myOverlay");
$("#aptest_open").click(function () {
if (mySidenav.style.display === 'block') {
mySidenav.style.display = 'none';
overlayBg.style.display = "none";
} else {
alert("2");
mySidenav.style.display = 'block';
overlayBg.style.display = "block";
}
});
function aptest_close() {
alert();
mySidenav.style.display = "none";
overlayBg.style.display = "none";
}
});
</script>
I'm not sure what is wrong, ive tried using jQuery, pure JS I cant get it to work. The JS above doesn't even run. I'm really confused. Thanks for any help!
You do not have any element with id="aptest_open". Your alert code is in a code block that works only by click on element with id aptest_open.
When you select an element by jquery selector, To change it's styles you need to yous css not style. In code snippet I added a button with id aptest_open and edited the problem.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<nav class="aptest-sidenav aptest-collapse aptest-white aptest-animate-left" style="z-index:3;width:300px;" id="mySidenav">This is my side nav
<br />
<div class="aptest-container aptest-row">
<div class="aptest-col s4">
<img src="/aptestimages/avatar2.png" class="aptest-circle aptest-margin-right" style="width:46px" />
</div>
<div class="aptest-col s8">
<span>Welcome, <strong><asp:Label runat="server" ID="Name_txt" Text="" /></strong></span><br />
</nav>
<div class="aptest-overlay aptest-hide-large aptest-animate-opacity" onclick="aptest_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="aptest-main" style="margin-left:300px;margin-top:43px;">
</div>
<input type="button" id="aptest_open" value="aptest_open" />
<script type="text/javascript">
$(document).ready(function () {
var mySidenav = $("#mySidenav");
var overlayBg = $("#myOverlay");
$("#aptest_open").click(function () {
if (mySidenav.css('display') === 'block') {
mySidenav.css('display', 'none');
} else {
alert("2");
mySidenav.css('display', 'block');
}
});
function aptest_close() {
alert();
mySidenav.style.display = "none";
overlayBg.style.display = "none";
}
});
</script>
I'm working with HTML and JavaScript and I need to make two instances of a toggle link. Here is my code for a single one:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "link1";
}
else {
ele.style.display = "block";
text.innerHTML = "link1";
}
}
</script>
<body> <a id="displayText" href="javascript:toggle()" style="font-size:160%;">link1</a>
<div id="toggleText" style="display: none; font-size:160%;"><p>paragraph1</p></div><br></body>
I need the two toggle links to independently show/hide different paragraphs of text when each one is clicked. How can I add a second instance below the first?
Add an event handler and a data-toggle-id attribute to each link. In your event handler, get the value of the data-toggle-id and use that to find the paragraph that you would like to show. Then use the toggle method of the element's classList to add/remove a class that shows the paragraph.
var links = document.querySelectorAll('[data-toggle-id]');
for (var ix = 0; ix < links.length; ix++) {
links.item(ix).addEventListener('click', function() {
document.getElementById(this.dataset.toggleId).classList.toggle('show');
});
}
.toggleText {
display: none;
}
.show {
display: block;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<a data-toggle-id="paragraph1">link1</a>
<div class="toggleText" id="paragraph1">
<p>paragraph1</p>
</div>
</div>
<div class="container">
<a data-toggle-id="paragraph2">link2</a>
<div class="toggleText" id="paragraph2">
<p>paragraph2</p>
</div>
</div>
<div class="container">
<a data-toggle-id="paragraph3">link3</a>
<div class="toggleText" id="paragraph3">
<p>paragraph3</p>
</div>
</div>
If you hate for loops, you can use Nick's suggestion and convert the NodeList to and array and use the forEach method:
Array.prototype.slice.call(document.querySelectorAll('[data-toggle-id]')).forEach(function(element) {
element.addEventListener('click', function(){
document.getElementById(this.dataset.toggleId).classList.toggle('show');
});
});
I'm working on creating a simple calculator. I'm stuck on the display issue. I have all the buttons in the button class. When I try to display anything using for example $(".display").text(output); it doesn't work. I have a display class to be selected, it's under a tag that can have text, and output is a variable that is equal to something. I tried comparing with some other code I had that involved changing text with variables but I don't see what the issue is.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/styles.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="calculator-background row">
<p class="calc-title">Free Code Camp Calculator</p>
<div class="row answer-box"><p class="display"></p></div>
<div class="row">
<button type="button">AC</button>
<button type="button">CE</button>
<button type="button">%</button>
<button type="button">/</button>
</div>
<div class="row">
<button type="button">7</button>
<button type="button">8</button>
<button type="button">9</button>
<button type="button">*</button>
</div>
<div class="row">
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
<button type="button">-</button>
</div>
<div class="row">
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">+</button>
</div>
<div class="row">
<button type="button">.</button>
<button type="button">0</button>
<button type="button">Ans</button>
<button type="button">=</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="resources/calculator.js"></script>
</body>
</html>
JavaScript:
$(document).ready(function(){
var output = "";
/* Calculator buttons */
// only buttons are calculator buttons
$("button").click(function(){
// gets the text label of the button?
var input = $(this).text();
// if, else if chain for calculator functions
if(input !== "AC" && input !== "CE" && input !== "Ans" && input !== "=")
{
output += input;
}
else if(input === "=")
{
output = eval(output);
}
else if(input === "CE" && output.length > 0)
{
output = output.slice(0,-1);
}
else if(input === "AC" && output.length > 0)
{
output = "";
}
else if(input === "Ans")
{
output = output;
}
// test to see if output wasn't getting anything
output = 5;
// display result in display class, doesn't display anything
$(".display").text(output);
});
});
The problem is the color of your text is white
add this to your css
.display {
color: #000000;
}
Here is the updated fiddle : https://jsfiddle.net/2fyftj7a/1/
The font color inherited by <p class='display'></p> is white, so you can't see it.
Add this your .display class...
color: #000;
I think that you still have an issue where you check for:
output.length
you might have to change that to:
output.toString().length