Develop Reference

Add CSS Class to Div by checking the Span text

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");
}
});

Display property not changing to 'none' using jQuery

I am facing a weird issue here. It might be a very silly mistake that I am doing.
function addTrainer() {
var modal = document.getElementById('add-trainers-form');
var span = document.getElementsByClassName("close")[0];
$(this).click(function(event) { //this part of code works fine,
$('.modal').css('display', 'block');
});
$(span).click(function(event) { //not working
// modal.style.display = "none";
$('.modal').css('display', 'inherit');
});
$(window).click(function(event) { //this also works fine
if (event.target == modal) {
modal.style.display = "none";
}
});
$('#add-trainer-btn').click(function() { //not working
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="add-trainers-controls">
<div class="add-remove-control">
<input id="add-trainer" type="image" src="img/add5.png" alt="Submit" width="48" height="48" onclick="addTrainer()">
</div>
</div>
<!-- The Modal -->
<div id="add-trainers-form" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Add Trainers</p>
<input class="textStyle" type="text" placeholder="Username">
<input class="textStyle" type="text" placeholder="Email">
<button id="add-trainer-btn" class="buttonStyle" type="button">Add</button>
</div>
</div>
</div>
When I click on #add-trainer button, modal pops up. Its default css property is set to display:none. After clicking it is set to display:block. When I click anywhere outside the modal window, display property is reset to none. But the same needs to be done with #add-trainer-btn and #close button which is not working.

Unable to get javascript to work in hiding div tags

I have the following code to hide a particular div tag and show another when a button is clicked. And for some reason I am not able to get it to work. Any suggestions as what may be wrong?
<div class="profile" align="center">
<form action="register"><br>
<p>Welcome #lastname , #firstname </p>
<div id="readonly" class="input2" style="display:inline">
………code here …
</div>
<div id="editable" class="input2" style="display:none">
…… code here ….
</div>
<div id="editable" class="reginput" style="display:none" >
…… code here ….
</div>
<div align="center">
<input type="button" class="buttoncls" value="Edit" id="btnchange" onclick="hideandshow();" />
</div><br>
<script type="text/javascript">
function hideandshow(){
if(document.getElementById(readonly).style.display = "none"){
document.getElementById(editable).style.display = "none";
document.getElementById(readonly).style.display = "inline";
} else {
document.getElementById(editable).style.display = "inline";
document.getElementById(readonly).style.display = "none";
}
}
</script>
</form>
</div>

You need to wrap the ids with quotes. Like:
document.getElementById('readonly')
//^--------^--------------- see the quotes?
getElementById expects the id to be in string.
Also, ids have to be unique, which in your html is definitely not. Use classes instead.
And, your if condition is using assignment operator =. Instead use ==

Try this
Have a very good look in your if condition you have to use logial operator (==) not (=)
and document.getElementById("editable") is another issue.
<div class="profile" align="center">
<form action="register"><br>
<p>Welcome #lastname , #firstname </p>
<div id="readonly" class="input2" style="display:inline">
………code here …
</div>
<div id="editable" class="input2" style="display:none">
…… code here ….
</div>
<div id="Div1" class="reginput" style="display:none" >
…… code here ….
</div>
<div align="center">
<input type="button" class="buttoncls" value="Edit" id="btnchange" onclick="hideandshow();" />
</div><br>
<script type="text/javascript">
function hideandshow() {
if (document.getElementById('readonly').style.display == "none") {
document.getElementById('editable').style.display = "none";
document.getElementById('readonly').style.display = "inline";
} else {
document.getElementById('editable').style.display = "inline";
document.getElementById('readonly').style.display = "none";
}
}
</script>
</form>
</div>

Try with below changes...
<script type="text/javascript">
function hideandshow(){
if(document.getElementById("readonly").style.display == "none"){
document.getElementById("editable").style.display = "none";
document.getElementById("readonly").style.display = "inline";
} else {
document.getElementById("editable").style.display = "inline";
document.getElementById("readonly").style.display = "none";
}
}
</script>

You have written some code, but seems like you don't know javascript, the mistake you did is whenever you want to get element by using id you have to pass id as string but here you have written directly. i.e. javascript parser and engine will treats that as a variable, in this place all are undefined na, that is the main problem.So write
<script type="text/javascript">
function hideandshow(){
if(document.getElementById("readonly").style.display = "none"){
document.getElementById("editable").style.display = "none";
document.getElementById("readonly").style.display = "inline";
} else {
document.getElementById("editable").style.display = "inline";
document.getElementById("readonly").style.display = "none";
}
}
</script>

Changing div onclick value using js

I am trying to pass a string to the onclick value of a div and it's just not working, have tried a million ways of doing it and this is what I have at the moment. I have tried passing different strings, plain text etc.. but nothing seems to be placed in the onclick value.
script:
function openPopup(imgname) {
document.getElementById('popup').style.display = 'block';
document.getElementById('delimg').src = 'imgstore/' + imgname;
document.getElementById('confirm').onclick = 'location.href=\'nextpage.php\'\;';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
and my div:
<div id="confirm" style="top:220px; left:100px;" class="yesnobutton" onclick="">
YES
</div>
I've looked on this site and I can't find a solution anywhere..thanks!
edit (ive moved the script below the div.. still not doing anything :( ):
<div id='popup' class='popup' style='display:none'>
<h5>Are you sure you wish delete this ad?</h5>
<div style='height:96px; width:128px; border:1px solid black; top:70px; left:50px; position:absolute;'>
<img id='delimg' src="" style='max-height:96px; max-width:128px;'>
</div>
<br>
<div id='confirm' style='top:220px; left:100px;' class='yesnobutton' onclick=''>
YES
</div>
<div style='top:220px; right:100px;' class='yesnobutton' onClick='closePopup()'>
NO
</div>
</div>
<script type='text/javascript'>
function openPopup(imgname) {
document.getElementById('popup').style.display = 'block';
document.getElementById('delimg').src = 'imgstore/' + imgname;
document.getElementById('confirm').onclick = 'location.href=\'newurl.html\'\;';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
</script>

Try to set a function to the onclick attribute.
<body>
<div id="confirm" style="top:220px; left:100px;" class="yesnobutton" onclick="">
YES
</div>
<script>
document.getElementById('confirm').onclick = function() {
location.href = 'nextpage.php';
}
</script>
</body>

jQuery code refactoring help needed

An update to before, here's what I'm dealing with:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" onClick=setupVeg("showCarrot", "carrotBig") /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" onClick=setupVeg("showBroc", "brocBig") /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
function setupVeg(thumbVeg, hiddenVeg) {
$("#" + thumbVeg).click(function() {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
});
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
isAnyBig=false;
});
</script>
</body>
This code is not working unfortunately. I have borrowed from suggested solution below.
Would be nice if it did work!
Any suggestions, most welcome.

I don't think you need any of the flags or the if conditions really. I think your logic is:
toggle carrotBig whenever showCarrot
is clicked.
hide div.hidden whenever showCarrot is clicked.
So all you need is:
$("#showCarrot").click(function () {
$("#carrotBig").toggle("fast");
$("#div.hidden").hide();
});
.toggle will handle one of your flags (isCarrotBig) and .hide() won't do anything if div.hidden is already hidden, so that takes care of your isAnyBig flag.
Now.. let's make that work with broc as well...
function setupVegetable(showId, toggleId) {
$("#" + showId).click(function () {
$("#" + toggleId).toggle("fast");
$("#div.hidden").hide();
});
}
setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");
If you're interested, you can refactor it FURTHER so you don't need to supply the IDs for each of the vegetables. I'll need to see your HTML markup though.

Ok I'll post a new answer in response to the edit.
Points worth noting:
Removed divs surrounding the imgs - they are unnecessary and complicate the relationship between the thumnnails and the large images.
Removed onclick attribute from within HTML - you will be attaching the event handlers in the JS so this is not needed.
Since the relationship between the thumbnails and the large images is quite obvious (the large images is just the next element) you don't need IDs to identify ANY of them. All you need is a class on the thumbnails.
Since we're not using IDs, only classes, you can add as many vegetables as you want without touching the JS
Your code modified:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<img class="imgThumb" src="img/carot.jpg" />
<img class="imgBig hidden" src="img/carot.jpg" />
<img class="imgThumb" src="img/brocoli.jpg" />
<img class="imgBig hidden" src="img/brocoli.jpg" />
</div>
<!-- end thumbs container -->
<script>
$("#thumbsContainer .imgThumb").click(function () {
var thisImgBig = $(this).next();
// Hide all imgBigs, except for this one
$("#thumbsContainer .imgBig").not(thisImgBig[0]).hide();
// Toggle this imgBig
thisImgBig.toggle();
});
$("#thumbsContainer .imgBig").click(function () {
// Hide this imgBig
$(this).hide();
});
</script>
</body>

create a function and reuse it....something like:
/**
* document here....
*/
var toggleElements = function() {
// your code here
}
and then
$("#whatever").click(toggleElements);

Personally I would suggest creating a simple jQuery plugin. Something like so:
(function($){
$.fn.big = function(options) {
var defaults = {
target: '#carrotBig',
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).click(function () {
isBrocBig=false;
if (isCarrotBig == false && isAnyBig == false) {
$(options.target).show("fast", function() {});
isCarrotBig=true;
isAnyBig=true;
}
else if (isCarrotBig == true) {
$(options.target).hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
else if (isCarrotBig == false && isAnyBig == true) {
$("div.hidden").hide("fast");
$(options.target).show("fast", function() {});
isCarrotBig=true;
}
else {
$("div.hidden").hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
});
});
};
})(jQuery);
Then you just call it with something like so:
$("#showCarrot").big({target: '#carrotBig'})
Your next step should be to investigate whether you can get rid of the global variables or not.

Ok I have found a neat(ish) sollution, dependent on each hidden DIV being the .next() one. If it isn't it won't work but should be fine generally though. Hacked!
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
$("div.thumb").click(function() {
var thumbVeg = $(this).attr("id");
var hiddenVeg = $(this).next().attr("id");
setupVeg(thumbVeg, hiddenVeg);
});
function setupVeg(thumbVeg, hiddenVeg) {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
});
</script>