I'm only starting to delve into javascript and have no real knowledge of how to work with jQuery, but I'm working on a page which features a control panel. I'm trying to get the functions of the control panel to change on clicking a button on it.
Here's what I have so far;
html:
<div id="functions">
<button id="prob" onclick="myproblem()" type="button" title="prob"></button>
<button id="button1" onclick="works1()" type="button" title="button1"></button>
<button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
Javascript:
function myproblem() {
document.getElementById("functions").html('
<button id="prob" onclick="myproblem()" type="button" title="prob"></button>
<button id="button3" onclick="works3()" type="button" title="button3"></button>
<button id="button4" onclick="works4()" type="button" title="button4"></button>');
}
The button I want to use to change the html is contained within the div which is getting changed. There are other onclick functions in that div which were working fine until I wrote the myproblem() code into my js file. With that section of code there, none of my js works.
This is a localhosted page, it won't be online.
I'm assuming I need to use jQuery to pull this off, but I have no idea how.
Thanks,
Use the innerHTML() method in JavaScript:
function myproblem() {
document.getElementById("functions").innerHTML ='<button id="prob" onclick="myproblem()" type="button" title="prob"></button> <button id="button3" onclick="works3()" type="button" title="button3"></button> <button id="button4" onclick="works4()" type="button" title="button4"></button>'
}
In Jquery you can use the html method
$(".functions").html('Your html code goes here')
<div class="temp01" style="display:none">
<button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
<button id="button1" onclick="works1()" type="button" title="button1"></button>
<button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
<div class="temp02" style="display:none">
<button id="prob" onclick="myproblem('temp01')" type="button" title="prob"></button>
<button id="button3" onclick="works3()" type="button" title="button3"></button>
<button id="button4" onclick="works4()" type="button" title="button4"></button>
</div>
<div class="functions">
<button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
<button id="button1" onclick="works1()" type="button" title="button1"></button>
<button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
<script>
function myproblem(x){ //x could be "temp01" or "temp02"
$(".functions").html("");
$("." + x).clone().attr("id","functions").show().appendTo(".functions");
}
</script>
Related
I'm working on a simple JavaScript calculator. Everything seems fine and other buttons works as expected except for the equal button which returns an "undefined" when it is clicked. On clicking the equal button, "if" the value of the screen is empty, I want the value of the screen to be set to an empty string, else, the new screen.value should be the result of an eval();
I've gone over the code several times and can't find what the problem is. Pls help. Thanks.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<div class="wrapper">
<form>
<input type="text" class="screen" placeholder="0" value="";>
</form>
<div class="buttons">
<button type="button" class="btn btn-yellow" data-num="*">*</button>
<button type="button" class="btn btn-yellow" data-num="/">/</button>
<button type="button" class="btn btn-yellow" data-num="-">-</button>
<button type="button" class="btn btn-yellow" data-num="+">+</button>
<button type="button" class="btn btn-grey" data-num="9">9</button>
<button type="button" class="btn btn-grey" data-num="8">8</button>
<button type="button" class="btn btn-grey" data-num="7">7</button>
<button type="button" class="btn btn-grey" data-num="6">6</button>
<button type="button" class="btn btn-grey" data-num="5">5</button>
<button type="button" class="btn btn-grey" data-num="4">4</button>
<button type="button" class="btn btn-grey" data-num="3">3</button>
<button type="button" class="btn btn-grey" data-num="2">2</button>
<button type="button" class="btn btn-grey" data-num="1">1</button>
<button type="button" class="btn btn-grey" data-num="0">0</button>
<button type="button" class="btn btn-grey" data-num=".">.</button>
<button type="button" class="btn btn-equal">=</button>
<button type="button" class="btn btn-clear">C</button>
</div>
</div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>
JAVASCRIPT CODE HERE
(function(){
let screen = document.querySelector(".screen");
let buttons = document.querySelectorAll(".btn");
let equal = document.querySelector(".btn-equal");
let clear = document.querySelector(".btn-clear");
buttons.forEach(function(button) {
button.addEventListener("click", function(e){
let value = e.target.dataset.num;
screen.value += value;
})
});
equal.addEventListener("click", function(e){
if (screen.value === "") {
screen.value = "";
} else{
let answer = eval(screen.value);
screen.value = answer;
}
})
clear.addEventListener("click", function(){
screen.value = "";
})
})();
The issue because you give the "=" button a ".btn" class, which has the 'click' event listener, and because the "=" button doesn't have attribute data-num, the input will be concatenate with undefined, so any calculation you will do will be end with "undefined" which give Syntax error.
So just removing "btn" class from "=" button will solve the issue.
This works, please check.
(function(){
let screen = document.querySelector(".screen");
let buttons = document.querySelectorAll(".btn");
let equal = document.querySelector(".btn-equal");
let clear = document.querySelector(".btn-clear");
buttons.forEach(function(button) {
button.addEventListener("click", function(e){
let value = e.target.dataset.num;
console.log(value)
screen.value += value;
})
});
equal.addEventListener("click", function(e){
if (screen.value === "") {
screen.value = "";
} else{
console.log(screen.value)
let answer = eval(screen.value);
screen.value = answer;
}
})
clear.addEventListener("click", function(){
screen.value = "";
})
})();
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<div class="wrapper">
<form>
<input type="text" class="screen" placeholder="0" value="";>
</form>
<div class="buttons">
<button type="button" class="btn btn-yellow" data-num="*">*</button>
<button type="button" class="btn btn-yellow" data-num="/">/</button>
<button type="button" class="btn btn-yellow" data-num="-">-</button>
<button type="button" class="btn btn-yellow" data-num="+">+</button>
<button type="button" class="btn btn-grey" data-num="9">9</button>
<button type="button" class="btn btn-grey" data-num="8">8</button>
<button type="button" class="btn btn-grey" data-num="7">7</button>
<button type="button" class="btn btn-grey" data-num="6">6</button>
<button type="button" class="btn btn-grey" data-num="5">5</button>
<button type="button" class="btn btn-grey" data-num="4">4</button>
<button type="button" class="btn btn-grey" data-num="3">3</button>
<button type="button" class="btn btn-grey" data-num="2">2</button>
<button type="button" class="btn btn-grey" data-num="1">1</button>
<button type="button" class="btn btn-grey" data-num="0">0</button>
<button type="button" class="btn btn-grey" data-num=".">.</button>
<button type="button" class="btn-equal">=</button>
<button type="button" class="btn btn-clear">C</button>
</div>
</div>
</body>
</html>
I want to display a button only if a statement is true:
<button type="button" id="btn1" class ="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<script>
var statement= 1;
if (statement== 1){
<button type="button" id="btn3" class="btn3"> btn3</button>
}
</script>
My html looks like this atm. But It doesnt work, even if my statement is 1=1. How can I achieve this working without a button click event or some interaction?
You could use document.write to directly write into the HTML output. (Mentioned by #Ivar in the comments) Just place the script where you want to write something.
<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<script>
var statement = 1;
if (statement == 1) {
document.write('<button type="button" id="btn3" class="btn3"> btn3</button>');
}
</script>
You can decide where to display the button by moving the script tag to the location where you want to insert it. See example.
However a more commonly used approach is to manipulate the DOM instead of "echoing" your result in JavaScript.
You could have a button and change it's display state:
var statement = 1;
if (statement == 1) {
document.querySelector("#btn3").style.display = "inline-block"
}
<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<button type="button" id="btn3" class="btn3" style="display: none;"> btn3</button>
You could create a button and add it to the DOM:
const button = document.createElement("button")
button.type = "button"
button.id = "btn3"
button.classList.add("btn3") // Adds one class with the name btn3
button.textContent = "btn3" // Writes what is inside <button>....</button>
document.body.append(button) // Adds element below each other elements
<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<button type="button" id="btn3" class="btn3" style="display: none;"> btn3</button>
More about:
https://www.w3schools.com/js/js_htmldom_methods.asp
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents (Source: #Teemu)
https://www.youtube.com/watch?v=y17RuWkWdn8
<button type="button" id="btn1" class ="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<script>
var statement= 1;
if (statement == 1){
var x = document.createElement("button");
var t = document.createTextNode("Click me");
x.appendChild(t);
document.body.appendChild(x)
}
</script>
I have the following likert scale:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled style="width:10px">Not<br />Fearsome</a>
<button id="fear1" type="button" name="gender" class="btn btn-default likert-1" val="0">1</button>
<button id="fear2" type="button" name="gender" class="btn btn-default likert-2" val="1">2</button>
<button id="fear3" type="button" name="gender" class="btn btn-default likert-3" val="2">3</button>
<button id="fear4" type="button" name="gender" class="btn btn-default likert-4" val="3">4</button>
<button id="fear5" type="button" name="gender" class="btn btn-default likert-5" val="4">5</button>
<a class="btn btn-link disabled" disabled style="width:10px">Extremely<br />Fearsome</a>
</div>
</div>
I am trying to access the 'val' attribute from a script by using:
$('#fear').val($(this).getAttribute('val'));
but this does not seem to work.
Note: #fear is the id of a hidden variable
getAttribute is a standard DOM method but you are trying to call it on a jQuery object.
Either use a standard DOM object:
this.getAttribute('val')
or use the jQuery attr method:
$(this).attr('val')
Note that val is not a valid attribute for the button element. Consider data-val instead.
Alternative, avoid adding an extra attribute with redundant information in the first place.
$(this).text();
none of the element has id "fear", check u have named them like fear1, fear2, fear3 ....
try
$(this).attr('val');
Try this: $('#fear').attr('val');
As suggested by #DimalChandrasiri, use
$(this).attr('val') or $('#fear').attr('val')
I am trying to change between colors on click in jquery. According to the picture below I have the default value
and then in this image when I click on the input box and then back on a button the background color stays on the input box rather than dissappears when any other button is clicked.
i'd like the background color to disappear when any of the buttons are clicked.
here is my jquery:
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
else{
$(this).removeAttr("background-color")
$("#default").addClass('active');
}
});
and here is my html:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
</fieldset>
</div>
any help would be appreciated!
Try
$(this).css("background-color", "")
Instead of this
$(this).removeAttr("background-color")
You cannot remove the background-color like this as it is not an attribute.
On click of button you should remove the class active from the donation-amount
what you have written will only work as toggle on the custom button only. Its not interacting with rest of the buttons.
Flow should be to remove class from custom button if any button is hit and if custom button is hit remove class from any of button.
$(".selectvalue").each(function(){
$(this).click(function(){
$("#donation-amount").removeClass('active');
})
});
$("#donation").click(function(){
$(".selectvalue").removeClass('active');
})
Is this the functionality you are looking for? Also added in fiddle
Instead of background color, just use the .active class
$('#donation-amount,#default, #btn2, #btn3').click(function(event) {
//add any other checks you want here
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
$("#donation-amount").removeClass('active');
$(event.target).addClass('active');
});
.active{
background-color:#c97e06;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
I thought this code satisfied your requirement.
if your problem is not solve then write comment in explain then I can do it.
Please vote for me.
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
console.log("hello");
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
});
$("body").on("click","#default,#btn2, #btn3",function(){
//console.log($(this));
$("#donation-amount").css("background-color","rgb(255,255,255)");
//$("#default").addClass('active');
}
This seems a bit complicated the way you have it. This is a classic "choice highlight" scenario and is easily handled with a simple $(this).addClass('active').siblings().removeClass('active'); to set and remove the active highlight.
I also took the liberty of making the assumption you want some CUSTOM amount so I added a simple input for that to use with the CUSTOM button. I also simplified the custom button by using the data attribute and removed the code from that as frankly it seemed weird to have in there.
HTML with some adjustments:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" class="btn btn-default selectvalue hover-color choice default active " value="50">50</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="100">100</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="150">150</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="" id="donation-amount" data-defaultvalue="57">Custom</button>
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
<div class="container">Custom Amount
<input id="customamount" type="text" value="67" />
</div>
Code that sets the color using an active class and sets the custom amount in the hidden field (or default if it has none)
$(".choice").on('click', function() {
if ($(this).is("#donation-amount")) {
var mydefault = $(this).data("defaultvalue");
// use custom amount if it has one, otherwise use this custom default
this.value = $('#customamount').val() || mydefault;
}
$(this).addClass('active').siblings().removeClass('active');
$('#donation-amount-value').val(this.value);
$('#display-amount').text('$'+this.value);
});
CSS:
.active {
background-color: #c97e06;
}
You can play around with it here: https://jsfiddle.net/MarkSchultheiss/6Lj62ngs/1/
I want 4 buttons next to each URL, you can then click on a button to copy the parent url to the buttons respective textfield.
I presume that it is easiest to do this using jquery but I have no clue where to start. Any advice would be much appreciated!
http://jsfiddle.net/WwdMw/
<div class="selection">
<div class"url">
<h2>example1.com</h2>
</div>
<button type="button" class="btn_opt1">Copy to Option1</button>
<button type="button" class="btn_opt2">Copy to Option2</button>
<button type="button" class="btn_opt3">Copy to Option3</button>
<button type="button" class="btn_opt4">Copy to Option4</button>
</div>
<hr/>
<div class="selection">
<div class"url">
<h2>example3.com</h2>
</div>
<button type="button" class="btn_opt1">Copy to Option1</button>
<button type="button" class="btn_opt2">Copy to Option2</button>
<button type="button" class="btn_opt3">Copy to Option3</button>
<button type="button" class="btn_opt4">Copy to Option4</button>
</div>
<hr/>
<div class="selection">
<div class"url">
<h2>example2.com</h2>
</div>
<button type="button" class="btn_opt1">Copy to Option1</button>
<button type="button" class="btn_opt2">Copy to Option2</button>
<button type="button" class="btn_opt3">Copy to Option3</button>
<button type="button" class="btn_opt4">Copy to Option4</button>
</div>
<hr/>
Have it.
$('button').click(function () {
var value = $(this).parent().find('h2').text();
var idIdentifier = $(this).text().substr($(this).text().length - 1);
var textArea = $('div[class*='+idIdentifier+']').find('textarea');
textArea.val(textArea.val() +" "+ value);
})
Live Demo