How to draw a line through checked items using javascript - javascript

I'm still learning javascript. I want to design a todo app. I'm done with the html and css sections. I've done a code that will enable the items on the list to be checkboxed when the tasks are completed. I however want a line to be drawn through the item when they are checkboxed using javascript or preferably jquery.
<!DOCTYPE html>
<html>
<head>
<title>Todolist</title>
<link rel="stylesheet" type="text/css" href="todo.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<h1>Todos</h1>
<div class="center">
<div class="top"></div>
<section id="formdata">
<form>
<input id="new-task-input" type="text" placeholder="What needs to be done?">
<br>
</form>
</section>
<section id="data">
<ul id="todolist-container"></ul>
</section>
</div>
<button type="button" id="add-task-button">Add Task</button>
</div>
<script type="text/template" id="list-item-template">
<li>
<label>
<input type="checkbox" id="checkbox">
<!-- TASK_NAME -->
</label>
</li>
</script>
<script>
var addTaskButton = document.getElementById("add-task-button");
var newTaskInput = document.getElementById("new-task-input");
var todolistContainer = document.getElementById("todolist-container");
var templateElement = document.getElementById("list-item-template");
var template = templateElement.innerText;
addTaskButton.addEventListener('click', function(event) {
var taskName = newTaskInput.value;
newTaskInput.value = "";
var taskHTML = template.replace("<!-- TASK_NAME -->", taskName);
todolistContainer.insertAdjacentHTML('afterbegin', taskHTML);
});
</script>
</body>
</html>

This can be accomplished by simply adding/removing a class using some text-decoration dependent on the state of the checkbox.
For Example:
$("input[type='checkbox']").change(function() {
if($(this).is(':checked')) {
$(this).next('label').addClass('checked');
} else {
$(this).next('label').removeClass('checked');
}
});
label.checked {
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" value="a" id="checkboxa" name="test[]" />
<label for="checkboxa">Option A</label>
<br/>
<input type="checkbox" value="b" id="checkboxb" name="test[]" />
<label for="checkboxa">Option B</label>
</form>

Related

window.alert not working when a form quiz is submitted

So, I am trying to make a quiz with html/js. I searched up how to reference an ID from js but even then the js function isn't working when I click the D option and submit.
Basically, I'm trying to get a window alert once someone has pressed submit on an answer option.
What the code outputs
<!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">
<link rel="stylesheet" href="missingletter.css">
<title>Missing letter</title>
</head>
<body>
<div class="images"></div>
<div class="wordToGuess"></div>
<form action="">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" id="c" name="cat" value="cat">
<label for="cat" class="answer options">C</label><br><br>
<input type="radio" id="m" name="mat" value="mat">
<label for="cat" class="answer options">M</label><br> <br>
<input type="radio" id="d" name="dat" value="dat">
<label for="cat" class="answer options">D</label><br> <br>
<input type="submit" value="submit">
</form>
<script>
if ($('radio').attr("d") == "submit") {
window.alert("Correct")
} else {
window.alert("try again")
}
</script>
<div class="letters"></div>
</body>
</html>
You have a multitude problems.
To use the jQuery $ function you must load the jQuery library. You can get it from its website
The selector radio does not look up an element by its ID, it looks up all <radio> elements… which don't exist in your document or in HTML. To look up an element by its ID you need $('#The_ID')
attr(...) fetches the value of the attribute with the name passed from the selected element. None of your elements have d="something".
You are running this code while the document loads, which is before the user will have had a chance to pick an option. You need to listen for the submit event (and then stop the form from submitting to the server)
Your checkboxes all have different names, so multiple of them can be selected at once
The for attribute of a <label> has to match the id of the input it is associated with.
Assuming your goal is:
WHEN the user clicks the submit button
FIND which checkbox they checked
CHECK if they picked option dat (although that is the wrong answer)
Then you need something along the lines of:
$('form').on('submit', event => {
event.preventDefault();
const choice = $('input[name="missing"]:checked').val();
if (choice === 'dat') {
alert("Correct");
} else {
alert("try again");
}
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form action="">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" id="c" name="missing" value="cat">
<label for="c" class="answer options">C</label><br><br>
<input type="radio" id="m" name="missing" value="mat">
<label for="m" class="answer options">M</label><br> <br>
<input type="radio" id="d" name="missing" value="dat">
<label for="d" class="answer options">D</label><br> <br>
<input type="submit" value="submit">
</form>
You must add a submit listener to the form. From there, you can check if the value is correct to show the correct alert. When using radio button, use the same name attribute to group them.
<form id="myForm" action="">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" name="answer" value="cat">
<label for="cat" class="answer options">C</label><br><br>
<input type="radio" name="answer" value="mat">
<label for="cat" class="answer options">M</label><br> <br>
<input type="radio" name="answer" value="dat">
<label for="cat" class="answer options">D</label><br> <br>
<input type="submit" value="submit">
</form>
$('#myForm').on('submit', function (e) {
e.preventDefault();
if ($('#myForm input[name="answer"]:checked').val() === 'cat') {
window.alert("Correct");
} else {
window.alert("try again");
}
});
Try This
<!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">
<link rel="stylesheet" href="missingletter.css">
<title>Missing letter</title>
</head>
<body>
<div class="images"></div>
<div class="wordToGuess"></div>
<form action="" id="theform">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" name="option" value="cat">
<label for="cat" class="answer options">C</label><br><br>
<input type="radio" name="option" value="mat">
<label for="cat" class="answer options">M</label><br> <br>
<input type="radio" name="option" value="dat">
<label for="cat" class="answer options">D</label><br> <br>
<button type="submit" id="btn">Submit</button>
</form>
<script>
const btn = document.querySelector('#btn');
btn.onclick = function(){
const options = document.querySelectorAll('input[name="option"]');
let selectedValue;
for (const option of options) {
if (option.checked) {
selectedValue = option.value;
break;
}
}
if(selectedValue == 'cat'){
alert('Correct.')
}else{
alert('Try Again.')
}
};
</script>
<div class="letters">
</div>
</body>
</html>

Displaying forms one next another [JS]

I'm just doing a short form with 2 questions. I want the second one to appear onclick of the submit button of first question. I've tried several things but doesn't works :/
It seems to reload the page everytime i click on the submit button.
I begin so maybe it's a really stupid error.
Thanks !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="question1">
<h2>Salamèche est-il de type feu ?</h2>
<div class="row">
<div>
<input type="radio" name="question1" id="oui1" value="oui" >
<label for="oui1" class="oui">OUI</label>
</div>
<div>
<input type="radio" name="question1" id="non1" value="non">
<label for="non1" class="non ">NON</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<form id="question2">
<h2>Tiplouf est-il de type plante ?</h2>
<div class="row">
<div>
<input type="radio" name="question1" id="oui1" value="oui" >
<label for="oui2" class="oui">OUI</label>
</div>
<div>
<input type="radio" name="question1" id="non1" value="non">
<label for="non2" class="non ">NON</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<form id="question3">
<h2>Tiplouf est-il de type plante ?</h2>
<div class="row">
<div>
<input type="radio" name="question1" id="oui1" value="oui" >
<label for="oui3" class="oui">OUI</label>
</div>
<div>
<input type="radio" name="question1" id="non1" value="non">
<label for="non3" class="non ">NON</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<script src="js/script.js"></script>
</body>
</html>
The Javascript
function changeform(x){
let nextForm = x + 1;
for (i=0; i <= x; i++) {
document.getElementById(i).addEventListener('submit', function() {
$('question' + i).css('display','none');
$('question' + nextForm).css('display','block');
});
}
}
function checked(x) {
for (i=0; i <= x; i++) {
var oui = 'oui'+i;
var non = 'non'+i;
console.log(oui);
$(oui).addEventListener('click', function() {
$(oui).className = 'cheked';
});
$(non).addEventListener('click', function() {
$(non).className = 'cheked';
});
}
}
checked(3);
changeform(3);
submit event always reloads the browser window to stop that write
document.getElementById(i).addEventListener('submit', function(event) {
event.preventDefault(); // this won't let submit action to reload window
$('question' + i).css('display','none');
$('question' + nextForm).css('display','block');
});

Function wrapped in jQuery not defined

I have a function in the script tag that initializes a couple of scripts in a separate file called "filters.js". But for some reason it returns "initialize is not defined". Does wrapping the function in jQuery change the scope? Here is my html:
<!DOCTYPE html>
<html>
<head>
<script src="Scripts/filters.js"></script>
<script src="Scripts/jquery-3.3.1.js"></script>
<meta charset="utf-8" />
<title>ICTV Filters</title>
</head>
<body>
<div class="filterCategory">
<div class="categoryTitle">
Genome
<input type="checkbox" id="ssDNA" />
<label for="ssDNA">ssDNA</label>
<input type="checkbox" id="dsDNA" />
<label for="dsDNA">dsDNA</label>
<input type="checkbox" id="ssRNA" />
<label for="ssRNA">ssRNA</label>
<input type="checkbox" id="dsRNA" />
<label for="dsRNA">dsRNA</label>
<button onclick="initialize()">Apply Filters</button> <!-- Returns error on this line-->
</div>
</div>
<div class="filterReturn">
<p id="filterReplace"></p>
</div>
<script>
jQuery(document).ready(function () {
function initialize() {
getSelections();
updateObject();
updateLocalStorage();
$(document).trigger('filtersUpdated');
}
})
</script>
</body>
</html>

How do you use the checked value of a checkbox in a sidebar to start a gs function?

I'm new around here. I'm working in an App Script add-on and I was wondering how do you use the checked value of a checkbox in a sidebar to start a particular GS function?
Here is the example HTML of the sidebar:
<!DOCTYPE html>
<html>
<head>
<link href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
rel="stylesheet">
</head>
<body>
<div class="sidebar">
<p>Please select the checkbox you need</p>
<form>
<div class="block form-group">
<div><input type="checkbox" id="CHECKBOX1">
<label for="CHECKBOX1">CHECKBOX1</label></div>
<div><input type="checkbox" id="CHECKBOX2">
<label for="CHECKBOX2">CHECKBOX2</label></div>
<div><input type="checkbox" id="CHECKBOX3">
<label for="CHECKBOX3">CHECKBOX3</label></div>
<div class="block">
<button class="action" id="useGsFunctions">Start Functions</button>
</div>
</form>
</div>
</body>
</html>
Now I would like to call, when the useGsFunctions is pressed, the GS function1 if the checkbox1 is true and/or the GS function2 if the checkbox2 is selected. But how do you do that?
Thanks in advance for your help and patience.
This may help you,
<!DOCTYPE html>
<html>
<head>
<link href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
rel="stylesheet">
<script>
function check(){
if(document.getElementById("CHECKBOX1").checked){
//Call your GS function 1
}
else if(document.getElementById("CHECKBOX2").checked){
//Call your GS function 2
}
else if(document.getElementById("CHECKBOX3").checked){
//Call your GS function 3
}
}
</script>
</head>
<body>
<div class="sidebar">
<p>Please select the checkbox you need</p>
<form>
<div class="block form-group">
<div><input type="checkbox" id="CHECKBOX1">
<label for="CHECKBOX1">CHECKBOX1</label></div>
<div><input type="checkbox" id="CHECKBOX2">
<label for="CHECKBOX2">CHECKBOX2</label></div>
<div><input type="checkbox" id="CHECKBOX3">
<label for="CHECKBOX3">CHECKBOX3</label></div>
<div class="block">
<button type = "button" class="action" id="useGsFunctions" onclick="check()">Start Functions</button>
</div>
</form>
</div>
</body>
</html>

Javascript for sliding down a form

Guys I have this html with the following code.It has 2 forms.formA and form B.I have icluded a java script also.I want to make the formB slide down,when I click the link "Internet banking" above form A and when i click on "card payment" vice versa.
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Payment Page</title>
<link rel="stylesheet" href="demo1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
this is the javascript I added.
<script type="text/javascript">
$(document).ready(function(){
$("#formA").click(function(){
$("#internet").slideToggle("slow");
});
});
</script>
<div class="demo">
<form id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
</body>
here is the #http://jsfiddle.net/pz83w/5/ demo.Im new to java script,so this is my experiment.Couldsomeone figure how to do this?
You need to modify your function in the following way:
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(400).removeClass('show');
} else {
$(this).delay(400).addClass('show').slideDown();
}
});
});
});
Here is working fiddle - http://jsfiddle.net/pz83w/7/
Remember, since you have two buttons, it's better to use class selector than to use id, same with your forms. That you can add a blank class (like 'show' in the example) to selected item and animate it the way you want.
Fiddle is updated, check HTML section, since I added classes to your forms.

Categories