javascript enable disabled button [duplicate] - javascript

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>

Related

I'm making delete buttons, and when I click them, they delete all of of the divs my JavaScript created

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.

Event Listener Not Calling Function Upon Firing

I am writing a function that should change the color of an h1 tag based on the value of the text in a text input form field. My HTML and JavaScript code is below:
function checkIfZero() {
//Get relevant elements from dom.
let value = parseInt(document.getElementById('text-field'));
let heading = document.getElementById('heading');
//Check if the element is zero, if so, adjust the color of the H1
if (value === 0) {
heading.style.color = 'green';
} else {
heading.style.color = 'red';
}
}
//Bind the function to onsubmit.
let form = document.getElementById('my-form');
form.onsubmit = function() {
checkIfZero();
};
<!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>
<script src='throwaway.js' type='text/javascript' defer></script>
<h1 id='heading'>This is a heading</h1>
<form id='my-form'>
<input type='text' id='text-field'>
<input type='submit' id='submit'>
</form>
</body>
</html>
Here, if I type in the number 0 in my input field and press enter (or click Submit), the color of the h1 tag does not change. However, I did check if the event was triggered or not.
When I amend my event listener to this:
let form = document.getElementById('my-form');
form.onsubmit = function() {
alert('You submitted the form');
};
, the alert does pop up in the browser. This suggests that there is an issue with my checkIfZero() function and not necessarily binding the function to the form element.
May I know how to fix my function so that it does change color upon firing the submit event? Thank you.

How do I make different radio buttons do different things?

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>

My EDIT button is not working properly? (Javascript Todo List) Beginner

I am a beginner in Javascript and is currently trying to make a todo list web app. But currently stucked at the edit button.
As you can see, I wanted to make an editable checklist but somehow everytime I hit the edit button, a new input comes out instead of replacing the current one. It also removes the 'checkbox' somehow.
Can anyone tell me where I did wrong? Thank you for your time!
Somehow the edit button doesn't work at all when I try to run it on VSCode. Here it works, but not as I wanted though.
const ul = document.querySelector('#invitedList');
ul.addEventListener('click', (event) => {
if(event.target.tagName === 'BUTTON') {
const button = event.target;
const li = button.parentNode;
if(button.textContent === 'edit') {
const span = li.firstElementChild;
const input = document.createElement('input');
input.type = 'text';
input.value = span.textContent;
li.insertBefore(input, span);
li.removeChild(span);
button.textContent = 'save';
} else if(button.textContent === 'save') {
const input = li.firstElementChild;
const span = document.createElement('span');
span.textContent = input.value;
li.insertBefore(span, input);
li.removeChild(input);
button.textContent = 'edit';
}
}
});
<!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="test.js"></script>
</head>
<body>
<!-- TASK LIST THAT IS SUPPOSED TO BE EDITABLE GOES DOWN HERE, AS A TEMPLATE -->
<div id="taskit" class="task">
<ul id="invitedList">
<input type="checkbox"/>
<label>
<span id="editable" class="custom-checkbox">Edit This</span>
</label>
<button type="submit" id="editbtn">edit</button>
</ul>
</div>
</body>
</html>
Have you considered trying Node.ReplaceChild() instead of creating a new element? Not sure how to tell you exactly how to do it but here is a link to the documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild
I'd suggest to change styling instead of creating and removing elements. Here is possible solution:
let isEditState = false;
const editButton = document.querySelector('#editbtn');
editButton.addEventListener('click', (event) => {
const span = document.querySelector('#editable');
const checkbox = document.querySelector('#checkbox');
const text = document.querySelector('#text');
if (isEditState) {
span.innerText = text.value;
checkbox.style.display = 'inline';
text.style.display = 'none';
editButton.innerText = 'edit';
} else {
checkbox.style.display = 'none';
text.style.display = 'inline';
editButton.innerText = 'save';
}
isEditState = !isEditState;
});
<!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>
<div id="taskit" class="task">
<ul id="invitedList">
<input type="checkbox" id="checkbox"/>
<input type="text" id="text" style="display: none"/>
<label>
<span id="editable" class="custom-checkbox">Edit This</span>
</label>
<button type="submit" id="editbtn">edit</button>
</ul>
</div>
</body>
</html>

how to disable button and show input title

Hi all I have the following code:
my code
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
}
}
<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
</form>
With my function, I am checking if my input text satisfies my regex. If not then I disabled my button.
With disabling I also want to set the "title" attribute to my input for showing a message.
With console log I can see that pattern and title were successfully added to my input but when I am starting to write something wrong only my button gets disabled and the title not showing the error message.
How can I fix that?
Actually, title attribute could only be shown while the mouse is hovering on the tag, so it is not suitable to add title in input. Maybe it works in next code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
<span id="wrong_text" style="display:none">wrong</span>
</form>
<script>
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
let wrongText = document.getElementById('wrong_text');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
wrongText.style.display = "inline";
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
wrongText.style.display = "none";
}
}
</script>
</body>
</html>
Look at the above snippet, I've tried to solve your issue. Let me know if it works
let companyNameField = document.getElementById("FormField_6_input");
let button = document.getElementById("ContinueButton_6");
companyNameField.addEventListener("input", validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", "[2-9]\\d{3}");
companyNameField.setAttribute("title", "wrong");
}
}
<!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>Static Template</title>
</head>
<body>
<form action="">
<input
type="text"
id="FormField_6_input"
name="CompanyName"
onchange="validate()"
/>
<button id="ContinueButton_6" disabled>Continue</button>
</form>
</body>
</html>
instead of using regex you can also use parseInt(); and isNaN(); to only allowing numbers to enter.

Categories