Hide/Show button + not valid HTML - javascript

First Question: On W3 HTML Validator I get the following error:
Attribute value not allowed on element input at this point.
But, in my code, I am using the 'value' to change images so how could I fix this?
Second question: I need the image to remain the same even when I refresh. I am new to Javascript, but I know I need to utilise cookies or local storage in some way. Can someone help with this?
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).val() == "Hide") {
$(this).val("Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).val("Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" value="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>

If you just want to make the HTML valid, the simplest tweak would be to use a class or data attribute instead.
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).data('status') == "Hide") {
$(this).data('status', "Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).data('status', "Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" data-status="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>
To persist the value, retrieve the status on pageload and run the handler
const initialStatus = localStorage.imageStatus || 'Hide';
$('#button').data('status', initialStatus);
$('#button').click();
and set it after a change
localStorage.imageStatus = $('#button').data('status');

Related

Fade in and out <div> elements via checkbox with javascript and jquery

So, I want to fade in and out a <div> with a checkbox and jquery. The <div>, which should get faded in/out, has the id "jobstartdatefade". The checkbox-id is "jobfixedstart". The Browser gives back the error "Uncaught SyntaxError:
Unexpected token ;"
Here is my javascript code:
//Setting the checked status to false
document.getElementById("jobfixedstart").checked = false;
document.getElementById('jobfixedstart').onclick = function(){
if(document.getElementById("jobfixedstart").checked == false;){
$('#jobstartdatefade').fadeIn(200);
document.getElementById("jobfixedstart").checked = true;
}
if(document.getElementById("jobfixedstart").checked == true;){
$('#jobstartdatefade').fadeOut(200);
document.getElementById("checkbox").checked = false;
}
};
The HTML code for the checkbox looks like this:
<input type="checkbox" class="form-control" value="jobfixedstart" id="jobfixedstart" />
And the <div>, which should get faded in in html looks like that:
<div id="jobstartdatefade">Text<div>
Thank you
Edit:
This code works, without the toggle-method:
document.getElementById('jobfixedstart').onclick = function(){
$('#jobstartdatefade').fadeIn(200);
};
Jquery is linked properly - other jquery animations work.
Unexpected token is because of the ; in this two lines if(document.getElementById("jobfixedstart").checked == false;){} & if(document.getElementById("jobfixedstart").checked == true;){}.
Also the fadeIn & fadeOut handlers need to be reversed.When the text box is checked it should fadeIn and vice versa
The if statement does not accept any semi colon
document.getElementById("jobfixedstart").checked = false;
document.getElementById('jobfixedstart').onclick = function() {
if (document.getElementById("jobfixedstart").checked === false) {
$('#jobstartdatefade').fadeOut(200);
}
if (document.getElementById("jobfixedstart").checked === true) {
$('#jobstartdatefade').fadeIn(200);
}
};
.fadeIn {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="form-control" value="jobfixedstart" id="jobfixedstart" />
<div id="jobstartdatefade" class="fadeIn">Text
<div>
$(document).ready(function(){
$("button").click(function(){
$('#jobfixedstart').hide();
});
});
try like this,,
<input type="checkbox" class="form-control" value="jobfixedstart" id="jobfixedstart" onclick="run();" />
<script type="text/javascript">
function run(){
if(document.getElementById("jobfixedstart").checked == true)
{
document.getElementById("jobstartdatefade").style.visibility = 'hidden' ;
}
else
{
document.getElementById("jobstartdatefade").style.visibility = '' ;
}
</script>

JQuery actions depending on which radio button is selected - if/else

I believe that this should be quite simple, and I thought that I was on to something, but its just not working. Forgive me, as Javascript is not my forte.
I just want the main button (Get Your New Rate) to do one of two things, based on whether the user selects YES or NO to the last of the 3 questions (these are styled radio buttons).
Thanks in advance for your time!
Here is the page in progress:
http://atomcrayon.com/mediaforce/refinance_go_v3.1/go.html
<div class="radioSelection">
<input type="radio" id="radioLicenseYes" name="radioLicense"><label for="radioLicenseYes" class="radioYes">YES</label>
<input type="radio" id="radioLicenseNo" name="radioLicense"><label for="radioLicenseNo" class="radioNo">NO</label>
</div>
<button class="getRate">Get Your New Rate</button>
<script type='text/javascript'>
function CheckLicense() {
var licenseYes = document.getElementById("radioLicenseYes");
var licenseNo = document.getElementById("radioLicenseNo");
if(licenseYes.checked) {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#loadingAnim").delay(500).fadeIn(1).delay(7000).fadeOut(500);
$("#loading1").delay(500).fadeIn(500).delay(1500).fadeOut(500);
$("#loading2").delay(3000).fadeIn(500).delay(1500).fadeOut(500);
$("#loading3").delay(5500).fadeIn(500).delay(1500).fadeOut(500);
$("#qualify").delay(8000).fadeIn(500);
$("#redirecting").delay(8800).fadeIn(1);
$("#loadingAnim2").delay(8800).fadeIn(1);
});
}
else if(licenseNo.checked) {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#noQualify").delay(500).fadeIn(500);
});
}
}
Here a working sample:
$(function() {
$(".getRate").click(function() {
var licenseYes = document.getElementById("radioLicenseYes");
var licenseNo = document.getElementById("radioLicenseNo");
if (licenseYes.checked) {
console.log("yes hello");
} else if (licenseNo.checked) {
console.log("no hello");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radioSelection">
<input type="radio" id="radioLicenseYes" name="radioLicense"><label for="radioLicenseYes" class="radioYes">YES</label>
<input type="radio" id="radioLicenseNo" name="radioLicense"><label for="radioLicenseNo" class="radioNo">NO</label>
</div>
<button class="getRate">Get Your New Rate</button>
With jQuery you can easily add an event listener and run your if statements. What is wrong with your code: You have created a javascript function, but you never call it! In your function, you have a bit of jquery that will do the trick just fine (with a few modifications). You don't need to make a named function like: function getBla(). jQuery does that for you. I have simplified the code for demonstration purposes.
try:
function CheckLicense() {
if ($('input[name=radioLicense]:checked').length !=0 ) {
if ($('input[name="radioLicense"]:checked').val() == "YES"){
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#loadingAnim").delay(500).fadeIn(1).delay(7000).fadeOut(500);
$("#loading1").delay(500).fadeIn(500).delay(1500).fadeOut(500);
$("#loading2").delay(3000).fadeIn(500).delay(1500).fadeOut(500);
$("#loading3").delay(5500).fadeIn(500).delay(1500).fadeOut(500);
$("#qualify").delay(8000).fadeIn(500);
$("#redirecting").delay(8800).fadeIn(1);
$("#loadingAnim2").delay(8800).fadeIn(1);
});
} else {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#noQualify").delay(500).fadeIn(500);
});
}
}
}
$('.getRate').click(function() {
CheckLicense();
}

Compare variables in Javascript

I have a script that takes in the value of input tags on a click event and I need to compare them to see if they are the same value. Iam still learning Javascript and JQuery so I really need to find some help. Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#swapCard_0").click(function(){
var phpval = document.getElementById('swapCard_0').value;
});
$("#swapCard_1").click(function(){
var phpval = document.getElementById('swapCard_1').value;
});
$("#swapCard_2").click(function(){
var phpval = document.getElementById('swapCard_2').value;
});
$("#swapCard_3").click(function(){
var phpval = document.getElementById('swapCard_3').value;
});
});
</script>
</head>
<body>
<input type="image" id="swapCard_0" src="image/image0.jpg" value="0">
<input type="image" id="swapCard_1" src="image/image1.jpg" value="1">
<input type="image" id="swapCard_2" src="image/image2.jpg" value="0">
<input type="image" id="swapCard_3" src="image/image3.jpg" value="1">
</body>
</html>
So Say a user clicks image 0 and then clicks image 2 which both have the value of 0, how can I compare them in the function then execute more code? I am sure I would need an if statement but I am not sure how to properly test it in my code. I would like to play a sound when the user clicks two different images that have the same value.
You can have a global variable and set it when user clicks on the first image like this.
$(document).ready(function(){
var selectedImageValue;
$("#swapCard_0").click(function(){
CheckValue($(this).val());
});
$("#swapCard_1").click(function(){
CheckValue($(this).val());
});
$("#swapCard_2").click(function(){
CheckValue($(this).val());
});
$("#swapCard_3").click(function(){
CheckValue($(this).val());
});
function CheckValue(value)
{
if(selectedImageValue != '')
{
selectedImageValue = value;
}
else
{
if(selectedImageValue === value)
{
//Your logic when image contains the same value
}
}
}
});
What i would do if i was you is the following:
Pass a class to all images so you can handle them with one click listener. e.g. class: .image
var phpval;
$('.image').on('click', function() {
if (phpval && phpval === this.value) {
//play sound here
} else {
phpval = this.value; //set php to this value
}
});
I would make several changes. First, I would put a class on all of your cards so that you can target all of them with a single selector. Then I would use the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var prev_click;
$(function(){
$('.swapCard').click(function(){
var this_click = this.value;
if(prev_click === this_click){
playSound();
}
else{
prev_click = this_click;
}
});
});
</script>
</head>
<body>
<input type="image" id="swapCard_0" class="swapCard" src="image/image0.jpg" value="0">
<input type="image" id="swapCard_1" class="swapCard" src="image/image1.jpg" value="1">
<input type="image" id="swapCard_2" class="swapCard" src="image/image2.jpg" value="0">
<input type="image" id="swapCard_3" class="swapCard" src="image/image3.jpg" value="1">
</body>
</html>
This code listens for a click. It then compares the previous click value with the current click value. If they match, it plays a sound. If they don't, it stores the current click value for the next comparison. I think this accomplishes what you're trying to do.

Reset FreeTextBox editor using javascript

I am using third party open source FreeTextbox (FTB) editor and i want to reset the textbox or make the textbox empty using javascript.
//HTML
<FTB:FreeTextBox ID="FreeTextBox1" BreakMode="LineBreak" DesignModeCss="~/FreeTextBox/DesignMode.css" Width="780px" Height="210px" AutoParseStyles="False" FormatHtmlTagsToXhtml="False" HtmlModeDefaultsToMonoSpaceFont="True" ClientIDMode="Static"></FTB:FreeTextBox>
<input type="button" value="Reset" id="buttonReset" runat="server" clientidmode="Static" />
<script language="javascript">
$("#buttonReset").bind('click', function () {
// Need the code here
});
</script>
First u have to find the control and then reset it.
//Code
$("#buttonReset").bind('click', function () {
if (FTB_API != null) {
objFTBControl = FTB_API['FreeTextBox1'];
if (objFTBControl) {
objFTBControl.SetHtml("");
}
}
});
try this it ll be work...
$("#buttonReset").bind('click', function () {
if (FTB_API != null) {
objFTBControl = FTB_API['FreeTextBox1'];
if (objFTBControl) {
objFTBControl.SetHtml("");
}
}
});

check box enable in Jquery

<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />
The javascript:
$(document).ready(function() {
function toggletr(obj)
{
if(obj.checked)
$(#tr99).hide();
else
$(#tr99).show();
}
hi.this is my code that runs in add page of staff.
if user is in edit mode the value that value is checked in the code
i mean to say in .cs .
checkbox.checked ="true" means . that time i need to make that tr value "tr99" is visiable true
if checkbox is not checked then make the tr as hide.
Take the toggletr method out of the "$(document).ready(function() {"
<script type="text/javascript">
function toggletr(obj){
if(obj.checked)
$('#tr99').hide();
else
$('#tr99').show();}
</script>
<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />
I think that you want this to happen
$(document).ready(function() {
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}
});
Is that it? You can also add the function directly
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}
If I were you I'd set the onclick method to be an event handler:
$(function(){
$('#cbox').click(function(){
if(this.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
});
});
If you wanted to do pure jQuery and not mix in normal Javascript (obj.checked)....
$(function(){
$("#cbox").click(function(){
if($(this).is(":checked")){
$("#tr99").show();
}else{
$("#tr99").hide();
}
});
});

Categories