Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
<div class="main-div main-div2"> <!-- IF up to date, main-div3 -->
<button id="update-btn" class="btn update-btn">
Up to date
</button>
</div>
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"
What kind of loop would be good for this Javascript function too if I want it to be
checking constantly?
Thank you.
there are many method to do it, here is the basic idea that you can get it done.
var btnText = document.getElementById("update-btn").innerText
var divClass = document.getElementById("outer-div")
if(btnText == "Up to date"){
divClass.classList.remove("main-div2");
divClass.classList.add("main-div3");
}else{
divClass.classList.remove("main-div3");
divClass.classList.add("main-div2");
}
.main-div2{
background-color:red;
}
.main-div3{
background-color:blue;
}
<div id="outer-div" class="main-div main-div2">
<button id="update-btn" class="btn update-btn">
Up to date
</button>
</div>
checkout the above snippet, its checking the text In if condition and sets up the class for parent div according to the text in the button, you can read more about adding and removing class from here
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have a form to send images, it works perfectly. But how to display an alert if the size or the extension of the file is not correct, or verify that it is indeed an image. I give you the code for my button.Thank you for help
<button type="button" name="photo" value="Upload" onclick="submitUploadFileForm()" class="btn btn-primary btn-lg" style="width: 100px;height: 50px;color: #FFF;">Envoyer</button>
Type : just add accept attribue in the input field (can save you to do test about the extension)
Size : in the submitUploadFileForm() function do this test : if(document.getElementById("inut id").files[0].size > x){ alert(check the size) return }
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I want to be able to click on a button then that puts that information into another part on the page (in a box). However, I want the ability to remove this from that box too.
What is the best way to do this using html and javascript?
thanks
Using html, css and jQuery you can get your desired output.
Please check below code.
function getHtml() {
var test = $("#input").text();
$("#output").show();
$("#remove").show();
$("#output").text(test);
}
function remove() {
$("#output").hide();
$("#remove").hide();
}
#output {
display: none;
}
#remove {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input">
Input: welcome
</div>
<button onClick="getHtml()">Click</button>
<div id="output">
</div>
<button id="remove" onClick="remove()">Remove</button>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
The customer asked for the prices to not be visible for each product on the e-shop until the customer clicks on a button. So far jQuery/javascript, as a solution to this, seem more appropriate, I was wondering if there is something else I am missing (code wise, in PHP for example) that would help out more.
I request you to post what you have tried before asking in SO in future!
though Solution is here
<div class="product-image">
<p class="prod-name">Product Name</p>
<p class="prod-price" style="display:none" >$1000</p>
<input type="button" class="show-price" value="show price"/>
</div>
Css
.product-image{
border:1px solid #ccc;
width:100px;
height:100px;
background-color:#f6f6f6;
}
.prod-name,.prod-price{
font-size:12px;
text-align:center;
}
JS
$('.show-price').click(function(){
$(this).hide();
$('.prod-price').show();
});
Working fiddle here http://jsfiddle.net/raghuchandrasorab/njt1sfew/1/
Sure also works just with php but the page would need to refresh so i recommend using Javascript onclick event that show a hidden field when activated.
Not sure if this answers your question since im not quite sure what it was.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i have two div's and i want to select first upper div value then lower div value. and pass both the values to next page.
here's my code:
<div id="upper">
Link
</div>
<div id="lower">
Link 1
</div>
if upper value is not selected then it should not go to the next page and when both values are selected then it should go on to next page.
what are the possible solutions.
Any help would be appreciated.
html
<span class="span_to_remember" data-my-data="myData1">
data1
</span>
<span class="span_to_remember" data-my-data="myData2">
data2
</span>
<span class="span_to_remember" data-my-data="myData3">
data3
</span>
<span class="span_to_remember" data-my-data="myData4">
data4
</span>
js(jquery)
$(document).ready(function(){
$(".span_to_remember").click(function() {
var spanData = $(this).data("my-data");
// also you can grab html with
// var spanData = $(this).html();
localStorage.setItem('param1', spanData);
});
});
after you write something on first page, you can read it on other page with
localStorage.getItem('param1');
info will be available for user on every page, even if he close browser, and return to website later
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a disabled field that I want to edit with the below script
<html>
<select id="country"onchange="changeCountryCode()">
<input type="text" disabled id="cc">
<script>
function changeCountryCode()
{
var temp = $('country').val();
$('cc').val(temp);
}
</script>
</html>
It's not working for me.
What you have almost works but you are missing the # in your selectors. The # sign tells jQuery to use the ID attribute when looking up the element desired.
Should be:
var temp = $('#country').val();
$('#cc').val(temp);