I have to do a project for school where the site will do different calculations based on which radio button is checked. The site is about solar panels and calculating the price. I have no idea where to even start, so I just copied some things from some tutorials and got this:
function cena ()
{
let opcja = document.getElementsByName('opcja');
opcja.forEach((opcja) => {
if (opcja.checked) {
if opcja = document.getElementById("standard");
document.getElementById("wynik").innerHTML="A";
else
if opcja = document.getElementById("premium");
document.getElementById("wynik").innerHTML="B";
}
})
;
}
This, of course, doesn't work and I'm totally lost, so I'm asking for some help or a recommendation on a website where this is explained. The goal is for when the "standard" option is selected, the script will use a lesser value/coefficient to calculate the price.
Here is some code that i just made and it works. If the radio button is checked then it outputs Checked. Hope this helps. And if so click the Check mark! It would really help!
<!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>
</head>
<body>
<input type="radio" name="radio_btn" id="radio_1" value="radio_1">
<input type="button" value="Check" onclick="check_radio()">
<script>
const radio_button = document.getElementById('radio_1'); // Get element in document
function check_radio() {
if (radio_button.checked == true) {
// Do you thing
console.log("Checked") // Logs "checked"
}
}
</script>
</body>
</html>
The easiest way would be to use jQuery. But in your case I suggest, you need plain javascript. The best option would be to use a document selector. by this you can directly switch on the selected radio button value to different workflows.
Hope this helps
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="radio" name="radio_btn" id="radio_1" value="val1">
<input type="radio" name="radio_btn" id="radio_2" value="val2">
<input type="radio" name="radio_btn" id="radio_3" value="val3">
<input type="button" value="Check" onclick="check_radio()">
<script>
function check_radio() {
switch (document.querySelector('input[name="radio_btn"]:checked').value) {
case 'val1':
console.log('val1 given');
break;
case 'val2':
console.log('val2 given');
break;
case 'val3':
console.log('val3 given');
break;
}
}
</script>
</body>
</html>
Related
I'm using JavaScript to make divs when the user clicks a button. This part is working fine. It creates a form with two buttons, make, and delete shot. Make doesn't work right now- I'm just building out the front end. The delete shot button should just delete it's parent div and everything in it- but clicking any of the delete buttons deletes all of the divs! Sorry if I'm not explaining this well.
Here is my HTML:
<!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>
<script src="./app.js" defer></script>
</head>
<body>
<h1>Calypso</h1>
<p>Use Calypso to make storyboards: </p>
<div class="newShot"></div>
<button class="newShotButton">New Shot</button>
<button
</body>
</html>
And here is my JavaScript:
let container = document.querySelector(".newShot")
let btn = document.querySelector(".newShotButton")
let shotListArray = []; //holds all of the shot objects
class shotObject {
constructor (number) {
this.name = ("shot" + number);
this.htmlContent =`
<form class="shot${number}"
<fieldset>
<legend>Shot ${number}:</legend>
<label for="fname">Enter Shot Description:</label><br>
<textarea id="fname" name="fname"> </textarea><br>
<input type="submit" value="Make">
<input type="submit" value="Delete shot" class="shot${number}DeleteButton">
<script>
let deleteShot${number} = document.getElementByClass('shot${number}');
shot${number}DeleteButton.addEventListener ("click", deleteShot${number}.remove());
</script>
</fieldset>
</form>
`
}
}
function createNewShot(){
let newShot = new shotObject (shotListArray.length + 1);
shotListArray.push(newShot);
let arrayLength = shotListArray.length
container.insertAdjacentHTML("beforeend", shotListArray[arrayLength-1].htmlContent);
}
btn.addEventListener("click", createNewShot);
I just want the delete buttons to work as expected. I'm a little confused because when I look at the live server, I can see the class names are correct in the tags for each of the buttons.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
it's my first time here, I still have to settle down. the problem with the code is that the result does not come out. Help
<!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>
<form>
<h2>Calacola l'area del quadrto</h2>
valore 1: <input type="text" id="fa">
valore 2: <input type="text" id="ca">
<div id="operatore" value="moltiplicazione"></div>
<br>
<button type="button" onclick="calcola()" value="invio">risultato = </button>
<!-- <input type="button" id="risultato" onclick="calcola()" value="invio"> -->
<div id="risultato"></div>
</form>
</head>
<body>
<script>
function calcola() {
var a = parseInt(document.querySelector('#fa').value);
var b = parseInt(document.querySelector('#ca').value);
var op = document.querySelector('#operatore').value;
var calcolo;
if (op == "moltiplicazione") {
calcolo = a*b;
}
document.querySelector('#risultato').innerHTML=calcolo;
}
</script>
</body>
</html>
I don't understand what it could be, it all seems right, it doesn't give me debugging error I hope you help me🥺
As others have already mentioned, you messed a few things up.
First of all you have to put your form/markup into the body. Secondly a div cannot have a value, so may you use a hidden input or some kind of select.
Here is a working fiddle:
https://jsfiddle.net/j2gesdbm/
<!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>
</head>
<body>
<form>
<h2>Calacola l'area del quadrto</h2>
valore 1: <input type="text" id="fa">
valore 2: <input type="text" id="ca">
<input type="hidden" id="operatore" value="moltiplicazione"/>
<br>
<button type="button" onclick="calcola()" value="invio">risultato = </button>
<!-- <input type="button" id="risultato" onclick="calcola()" value="invio"> -->
<div id="risultato"></div>
</form>
<script>
function calcola() {
var a = parseInt(document.querySelector('#fa').value);
var b = parseInt(document.querySelector('#ca').value);
var op = document.querySelector('#operatore').value;
var calcolo;
if (op == "moltiplicazione") {
calcolo = a*b;
}
document.querySelector('#risultato').innerHTML=calcolo;
}
</script>
</body>
</html>
You are using a "value" attribute for a div
<div id="operatore" value="moltiplicazione"></div>
You can not add the "value" attribute to a div. If you want give a value to this tag, you have to change to an input tag
<input id="operatore" value="moltiplicazione"></input>
If you don't want the input tag to be visible you can set the input type as "hidden"
<input type="hidden" id="operatore" value="moltiplicazione"></input>
I hope I've helped :)
Ok, this might be quite hard for me to explain, but I will give it a go. I have two HTML pages: form.html & display.html. The form page has an input which obtains a value and then puts it into local storage once the form is submitted. After the form submission, the user will be taken to the display page, which will then retrieve the input value from the previous page from local storage and then displays the value inside the input field on the display page. The display page will later act as a job page which will display a list of jobs which is filterable by the value inside the input field on the same page. I can get the filter function to work by using onkeyup on the input field, but I what I can't make work is the filter function with the input value from the previous page by using something like onload. The reason why I am using two pages is that I will later use this code on a website which will have a search box on the landing page, and then will be directed to the Jobs page with filtered results. I am sorry if this was really hard to understand, I will post the code below so you might better understand.
Many thanks to anyone who takes time out of their day to help me with this problem, it is much appreciated.
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function passValues() {
var firstName = document.getElementById("txt").value;
localStorage.setItem("textValue", firstName);
return false;
}
</script>
</head>
<body>
<form action="display.html">
<input type="text" id="txt" />
<input type="submit" value="Click" onclick="passValues();" />
</form>
</body>
</html>
display.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Tokyo Expat Job Search</h1>
<input onload="filter()" onkeyup="filter()" id="result" type="text">
<ul id="Menu">
<li>English Techer</li>
<li>Waiter/Waitress</li>
<li>Developer</li>
<li>Banker</li>
<li>Designer</li>
<li>Logistics</li>
</ul>
<script>
function filter() {
var filterValue, input, ul, li, a, i;
input = document.getElementById("result");
filterValue = input.value.toUpperCase();
ul = document.getElementById("Menu");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
document.getElementById("result").value = localStorage.getItem("textValue");
</script>
</body>
</html>
Try to add the listener to window.onload? The input does not have such an event.
window.addEventListener('load', filter, false)
This question already has answers here:
Disabling and enabling a html input button
(12 answers)
Closed 5 years ago.
When event A happens I disable a button:
if (document.getElementById('detail_n').checked) {
chkxp.disabled = true; }
But if event B happens I want to re-enable the button:
if (document.getElementById('detail_y').checked) {
chkxp.disabled = false; }
That did not re-enable the button. I tried:
chkxp.removeAttribute('disabled');
That did not work either.
I HAVE LOOKED AT THE OTHER PAGES WHICH PRESENT SOLUTIONS, AND THEY ARE EXACTLY WHAT I ALREADY HAVE, WHICH IS NOT WORKING FOR ME. THAT IS WHY I AM ASKING AGAIN.
The only thing that worked is to re-submit the page. That would be a huge pain for the user, since there is a lot of stuff to fill into that form.
I'm in firefox. Can anyone give me a Javascript solution that does work?
It seems to work fine with setting disabled to true and then removing the disabled attribute in order to re-enable the buttton. checkout MDN nd snippet below: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled
var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click', function (e) {
if (btn.disabled === true) {
btn.removeAttribute('disabled');
console.log('Target is enabled');
}
else {
console.log('Target is disabled');
btn.disabled = true;
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="btn">Target</button>
<button id="btn2">Click here !</button>
</body>
</html>
UPDATE
Snippet for radio buttons.
if my snippet doesn't work on your browser, please check your browser settings.
var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
btn2.addEventListener('change',function () {
if (btn2.checked === true) {
btn.disabled = true;
}
});
btn3.addEventListener('change',function () {
if (btn3.checked === true) {
btn.removeAttribute("disabled");
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="radio" id="btn"><label for="btn">Target</label>
<input type="radio" name="x" id="btn2"><label for="btn2">Disable target</label>
<input type="radio" name="x" id="btn3"><label for="btn3">Enable target</label>
</body>
</html>
I need checkBox 3 to disable checkBox 1 & 2 when it is selected.
The code works when I have the onClick in the 3rd checkbox tag, but my lead programmer wants the onClick in the JavaScript code above. I'm not that good with JS so I don't know exactly why it's not working. This is what I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var field = document.getElementById("check_1157");
if (field)
{
function update1157Box(contactMethod)
{
var contactMethod = document.getElementById("check_1157");
if(contactMethod.check_1157.checked)
{
//enable the not to receive information
contactMethod.check_1156.disabled =true;
contactMethod.check_1156.checked = false;
contactMethod.check_1158.disabled =true;
contactMethod.check_1158.checked = false;
return;
}
}
field.onClick = update1157Box(this.form)
//the not to receive information
contactMethod.check_1156.checked = false;
contactMethod.check_1156.disabled = false;
contactMethod.check_1158.checked = false;
contactMethod.check_1158.disabled = false;
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox">Check Box 3</label>
</div>
</form>
</body>
</html>
jQuery makes event handlers a piece of cake:
$('#check_1157').click(function() {
if ($(this).prop('checked')) {
$('#check_1156, #check_1158').prop({
checked: false,
disabled: true
});
} else {
$('#check_1156, #check_1158').prop({disabled: false});
}
});
My approach apposed to Fabian's, I would do some thing like this, as you have a div around around those block of three checkboxs called many-from-many this will look for the (parent <lable>) nodes (parent <DIV>) of the third check box and then find the childNodes (checkboxs)
<form>
<div class="many-from-many"><label style="display: block;"><input id="check_1156"name="answers[166][]" value="1156" type="checkbox">Check Box 1</label><label style="display: block;"><input id="check_1158"name="answers[166][]" value="1158" type="checkbox">Check Box 2</label><label style="display: block;"><input id="check_1157"name="answers[166][]" value="1157" type="checkbox" onclick="togTopTwo(this)">Check Box 3</label></div>
</form>
.
function togTopTwo(c){
var mm = c.parentNode.parentNode;
var xx = mm.firstChild.firstChild;
var secondOfMany = xx.parentNode.nextSibling.firstChild;
if(c.checked){
xx.disabled=true;
secondOfMany.disabled = true;
}else{
xx.disabled=false;
secondOfMany.disabled =false;
}
}
As Eric's solution is using jQuery, here is a pure JavaScript alternative:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var toggle_list = ['check_1156', 'check_1158'];
function toggle(checkbox) {
if (checkbox.disabled) {
checkbox.removeAttribute('disabled');
} else {
checkbox.setAttribute('disabled', true);
}
}
function toggleActivation() {
for (var i=0; i<toggle_list.length; i++) {
var id = toggle_list[i];
var checkbox = document.getElementById(id);
toggle(checkbox);
}
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox" onchange="toggleActivation()">Check Box 3</label>
</div>
</form>
</body>
</html>
This might not be IE safe as I am currently running Linux. If it doesn't work in IE, the problem will be inside the toggle function.