I'm using a button tag to create the button. I want to disable the button when I click on it. But I'm not able to do it. I hope someone here can help me...
You need to change the .disabled property of the button.
var btn = document.querySelector("#submit-btn");
btn.disabled = true;
Live example:
var btn = document.querySelector("#submit-btn");
btn.addEventListener('click', function() {
submit();
});
function submit() {
btn.disabled = true;
}
#submit-btn {
width: 100%;
height: 30px;
border: solid black .5px;
}
#submit-btn:disabled {
background-color: gray;
}
<input type="submit" id="submit-btn" value="Submit">
Resourced from this question.
HTML <input type="button" id="btn1" onClick="clicked()" value="text">
JS
function clicked(){
var btn1 = document.getElementById("btn1");
btn1.disabled = true;
}
Related
I've found tutorials that make an image hidden with some css, javascript and html but I'm having trouble making the image hidden first, and then having the button be able to make it visible and then hidden if pressed again.
edit: hopefully this code should help! Again, sorry I can't figure some of this out, I don't really know how this site works and I'm pretty new to coding,,,,
edit 2: I added where the function is being called. It's suppose to be a multiple choice that shows an image when correct!
<style>
div.notdropdown {
margin-top: 100px;
margin-bottom: 100px;
border: 1px solid black;
background-color: rgb(181, 204, 180, 0.9);
}
.hide{
display:none;
}
</style>
</body>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div id="myDIV">
<img class= "hide" src="https://www.merriam-webster.com/assets/mw/static/art/dict/frig_bi.gif">
<br>
<a class= "hide" href="https://www.merriam-webster.com/dictionary/frigate%20bird">https://www.merriam-webster.com/dictionary/frigate%20bird </a>
<br>
</div>
<h1>What is a Frigate?</h1><br>
<form >
<input type="radio" name="choice" value="Bird"> A type of Bird
<input type="radio" name="choice" value="Mangrove"> A type of Mangrove tree
<input type="radio" name="choice" value="Sea Creature"> A type of Sea Creature
<input type="radio" name="choice" value="None"> None of These
</form>
<button onclick="submitAnswer();"> Submit Answer</button>
</body>
<script>
function submitAnswer() {
var radios = document.getElementsByName("choice");
var i = 0, len = radios.length;
var checked = false;
var userAnswer;
for( ; i < len; i++ ) {
if(radios[i].checked) {
checked = true;
userAnswer = radios[i].value;
}
}
if(!checked) {
alert("please select choice answer");
return;
}
// Correct answer
if(userAnswer === "Bird") {
myFunction();
alert("Answer is correct!");
}
// incorrect answer
else {
alert("Answer is wrong!");
}
}
</script>
</body>
</html>
in fact it's very simple, just use the toggle method, which allows you to easily enable and disable a class in an element
function toggleImage(){
document.querySelector('#image').classList.toggle('hidden');
}
.hidden{
display: none;
}
.w-100{
width: 100%;
}
.mb-10{
margin-bottom: 10px;
}
<button onClick="toggleImage()" class="w-100 mb-10">Show/Hide</button>
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image" class="hidden w-100"/>
to work with a link to just change the tag to a and use href="#"
function toggleImage(){
document.querySelector('#image').classList.toggle('hidden');
}
.hidden{
display: none;
}
.w-100{
width: 100%;
}
.mb-10{
margin-bottom: 10px;
}
<a onClick="toggleImage()" class="w-100 mb-10" href="#">Show/Hide</a>
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image" class="hidden w-100"/>
You just need to call your function on button tag. Add a button in your html file on which you want your div to toggle. As you are using function name myFunction, call it on that function using
onClick="myFunction()"
And your code should work fine. Don't need to add any new class or even hide your div by default.
check this code. I think this will help you.
<button id = "showhide" onclick = "showhide()">Show Hide Image</button>
<div id = "image" style="width: 100px; height : 100px;">
<h4> Image Code </h4>
</div>
<script>
$('#showhide').on('click', function(e){
$("#image").toggle();
});
</script>
I am trying to make two buttons stand side by side
when clicked on one should say "im right" and the other says "no im right!"
<button id="right" type="button">Click Me!</button>
<button id="wrong" type="button">Click Me!</button>
This is my Html.
I am new to Javascript so I am having some trouble putting this together in a function.
document.getElementById("right").addEventListener("click", function(){
alert("I am Right!");
});
document.getElementById("wrong").addEventListener("click", function(){
alert("No,I'm Right!");
});
rather than have an alert I want to have the button's change to that text when clicked on.
<script>
function myFunction(isRight) {
if(isRight) {
alert('It is right button');
} else {
alert('It is left button');
}
}
</script>
<button class="left" onclick="myFunction(false)">Left</button>
<button class="right" onclick="myFunction(true)">Right</button>
You could use something like that for the sample.
But I recommend look to addEventLister and Event Object it will looks good.
function swapText(buttonClicked){
var button1 = document.getElementById('button1');
var btn1Output = document.getElementById('btn1Output');
var btn2Output = document.getElementById('btn2Output');
if (buttonClicked == button1){
btn1Output.innerHTML = "I'm right.";
btn2Output.innerHTML = "No, I'm right.";
} else {
btn1Output.innerHTML = "No, I'm right.";
btn2Output.innerHTML = "I'm right.";
}
}
button, div {
display: inline-block;
width: 45%;
height: 50px;
}
<button onclick="swapText(this)" id="button1">Click</button>
<div id="btn1Output"></div>
<button onclick="swapText(this)" id="button2">Click</button>
<div id="btn2Output"></div>
So I have a code so when I press a button a number goes up.
This is the html:
<button type="button" class="btn btn-default" onclick="javascript:btnClick()">+1</button>
This is the JavaScript:
function btnClick(){
timesClicked += 1;
document.getElementById('timesClicked').innerHTML = timesClicked;
return true
}
So I have a button that has +1 so when I press it the number goes up
I need a button that is disabled until that number gets to 5 for example then becomes clickable, is that possible? I'm still learning Javascript,
All help is appreciated.
If the button is disabled, a user cannot interact with it.
Try the following
window.onload=function() {
var count =0;
document.getElementById("btn").addEventListener("click", function() {
count++;
if(count === 5) {
this.innerHTML = "5 clicks reached!";
}
});
};
<button id="btn">Click</button>
You could try something like this:
document.getElementById("button").disabled = true;
timesClicked = 0;
function btnClick(){
timesClicked += 1;
document.getElementById('timesClicked').innerHTML = timesClicked;
if(timesClicked > 5){
document.getElementById("button").disabled = false;
}
}
<button type="button" id="button" class="btn btn-default" onclick="btnClick()">+1</button>
[].forEach.call(document.querySelectorAll("[data-click-vote]"), function(btn) {
btn.addEventListener("click", vote);
});
function vote() {
this.innerHTML = this.value=Math.min(++this.value, 5);
}
<button value="0" name="movie1" data-click-vote>+1</button> The Revenant<br>
<button value="0" name="movie2" data-click-vote>+1</button> Dracula<br>
<button value="0" name="movie3" data-click-vote>+1</button> The Usual Suspect<br>
Multiple buttons
Updates simultaneously value and innerHTML
You can submit the values using a <form>
You can achieve your requirement with JS and CSS as in the below solution.
You haven't tagged it with CSS but you might want to look at this as well.
Button is simply a disabled span. Clicks are registered and when the count requirement is satisfied, it springs to life and handles your clicks with the actual handler code. (You can add a handler instead of printing a click count)
window.onload = function() {
var count = 1;
document.getElementById("btn").addEventListener("click", function() {
count++;
this.innerHTML = "+" + count;
if (count >= 5) {
this.className = "btnenabled";
this.innerHTML = "Print Click Count!";
if(count > 5) {
document.getElementById("counter").innerHTML= "Click Count is " + count;
}
}
});
};
.btnenabled {
width:200px;
background-color: blue;
padding: 3px;
border-radius: 3px;
color: white;
font-weight: bold;
display:block;
text-align:center;
}
.btnenabled:hover {
background-color:purple;
}
.btndisabled {
width:200px;
padding: 3px;
border-radius: 3px;
display:block;
text-align:center;
background-color: grey;
color: #F0F0F0;
font-weight: 100;
}
<span id="btn" class="btndisabled"> +1 </span>
<span id="counter"></span>
In my options page I generate some rows with an input number and a button, related to entries at chrome storage.
The problem is that the event listener i'm creating for the buttons doesn't work at all.
options.html
<html>
<head>
<title>Select the movie's Id</title>
<style>
body: { padding: 10px; }
.style-1 input[type="number"] {
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
width: 5em;
}
.style-1 input[type="number"]:focus,
.style-1 input[type="number"].focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
</style>
</head>
<body>
<legend style="border-bottom: solid 1px">Insert</legend>
<input type="number" name="id" id="id" value="">
<button id="save">Insert</button>
<br>
<br>
<legend style="border-bottom: solid 1px">Manage</legend>
<div id="ghost" style="display: none">
<input type="number" name="VAL">
<button name="DEL" id="" >Delete</button>
<br><br>
</div>
<script src="options.js"></script>
</body>
options.js
document.getElementById('save').addEventListener('click', save_options);
chrome.storage.sync.get('movieId', function(result){
for (var i=0; i<result.movieId.length; i++){
createRow(result.movieId[i]);
}
});
function save_options() {
var id = document.getElementById('id').value;
chrome.storage.sync.get('movieId', function(result){
var ids = result.movieId;
ids.push(id);
chrome.storage.sync.set({
'movieId': ids
}, function() {
});
location.reload();
});
}
function createRow(pos){
var newRows= document.getElementById('ghost').cloneNode(true);
newRows.id= '';
newRows.style.display= 'block';
var newRow= newRows.childNodes;
for (var i= 0; i< newRow.length; i++){
var newName= newRow[i].name;
if (newName){
newRow[i].name = newName+pos;
newRow[i].id = pos;
newRow[i].value = pos;
}
}
var insertHere= document.getElementById('ghost');
insertHere.parentNode.insertBefore(newRows,insertHere);
document.getElementById(pos).addEventListener('click', delet());
}
function loop(arrayIds){
console.log('loop');
for (var i=0; i<arrayIds.length; i++){
createRow(i);
}
}
function delet(){
console.log("this.id");
//chrome.storage.sync.remove(id);
}
With this, when I click any of the Delete buttons nothing happens.
I've tried all the combinations I can think for document.getElementById(pos).addEventListener('click', delet()); but none of them work.
document.getElementById(pos).addEventListener('click', delet());
is supposed to be
document.getElementById(pos).addEventListener('click', delet);
In your snippet you are calling delet thus result of that function is added as event listener that is undefined. If you want to bind delet as event handler, pass it to addEventListener without calling it.
EDIT
As I saw your code, you are giving same id to both input and button and when you call document.getElementById it returns input instead of button so, event is binded to input instead of button.
To fix that replace your createRow with this
function createRow(pos) {
var newRow = document.getElementById('ghost').cloneNode(true);
newRow.id= '';
newRow.style.display= 'block';
var value = newRow.querySelector("[name=VAL]");
var button = newRow.querySelector("[name=DEL]");
value.id = "VAL" + pos;
value.value = pos;
button.id = "DEL" + pos;
var insertHere= document.getElementById('ghost');
insertHere.parentNode.insertBefore(newRow, insertHere);
button.addEventListener('click', delet);
}
I have a signup page with two buttons. When one button is clicked, the corresponding container displays. When a button is clicked the bg color changes and sticks, even after I select the other button. Then, if I select the button again it goes back to its unselected/inactive color.
I want the clicked button to maintain its active color, but only if the other button is not clicked. If the other button is clicked, I want the first button to go back to its original bg color.
Here is the js:
<script type = "text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("container1").style.display = 'inline';
document.getElementById("container2").style.display = 'none';
} else if (c.value == "2") {
document.getElementById("container1").style.display = 'none';
document.getElementById("container2").style.display = 'inline';
} else {}
}
</script>
And here are the buttons (sorry for formatting issues):
<!--SELECTION BUTTONS-->
<form>
<div class="control-group">
<label class="control-label">Are you a:</label>
<div class="controls">
<p><div id="account-type" name="account-type" class="btn-group selection-buttons" data-toggle="buttons-radio">
<button value="1" type="button" name="formselector" onClick="displayForm(this)" id="button1" class="btn btn-info">
Buttons1</button>
<button value="2" type="button" name="formselector" onClick="displayForm(this)" id="button2" class="btn btn-info">Button2</button>
</div></p>
</div>
</div>
</form>
Here is the CSS (using Bootstrap):
/* SWITCH BUTTONS */
.selection-buttons button{
width: 140px;
height: 60px;
color: #FFF;
background-color: #FFB10D;
border-color: #fff; /* e59f0b */
}
.selection-buttons .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #FFF;
background-color: #00CC66;
border-color: #fff; /* 00b75b */
}
Thank you!!
A pretty simple potential solution. In your JS just add the following lines:
function displayForm(c) {
for (var i = 1; i <= number_of_buttons; i++) {
if (document.getElementById("button"+i) {
document.getElementById("button"+i).className = "active";
} else {
document.getElementById("button"+i).className = "inactive";
}
}
}
Then just use your CSS file to set the formatting you want for the active and inactive classes. If you don't have 1000+ buttons, this will be efficient enough for your needs.