Can anyone explain why the "onclick" part won't fire?
function displayHello() {
let helloName = document.getElementByID('helloNameInput').value;
// prints out the variable, to the button >>
document.getElementByID("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
<label for="helloNameInput" class="form-label">Name:</label>
<input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>
<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>
<!--Display Hello! & Reset buttons-->
<div>
<button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
<button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>
PS:
I'm just learning JS, so, I'm not too familiar with a lot of stuff yet. (We just finished the HTML stuff last semester)
not getElementByID. use getElementById.
function displayHello() {
let helloName = document.getElementById('helloNameInput').value;
// prints out the variable, to the button >>
document.getElementById("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
<label for="helloNameInput" class="form-label">Name:</label>
<input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>
<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>
<!--Display Hello! & Reset buttons-->
<div>
<button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
<button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>
It does work, you just had a typo with getElementByID, it should be getElementById
function displayHello() {
let helloName = document.getElementById('helloNameInput').value;
// prints out the variable, to the button >>
document.getElementById("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
<label for="helloNameInput" class="form-label">Name:</label>
<input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>
<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>
<!--Display Hello! & Reset buttons-->
<div>
<button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
<button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>
In case others run into this same issue, I've uploaded a screenshot of the "git change log", that has all the corrections to the above, so that it worked as intended. ^_^
Related
I got a problem I need to fill two fields in a form with diffrent values and I would like to do that with an button onClick function.
I genererat buttons and the output looks like this:
<button class="btn btn-primary" type="button" onclick="fillsquare(test, 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare(test2, 3)">1</button>
Now I want to fill my form with the values
the first value I want to be placed in the first field id="areaname_fill" and the secound value should fill the field id="squarename_fill".
Just to clarify, If I click on the first button
id="areaname_fill" should set the value to "Test" AND
id="squarename_fill" should set the value to 1.
<div class="form-group">
<label>fyll i område</label>
<input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="" />
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="" />
</div>
I came up with this JS but I can't get it to work, any ides?
function fillsquare(area,square)
{
var area = area;
var square = square;
document.getElementById(areaname_fill).value = area;
document.getElementById(squarename_fill).value = square;
}
You can achieve it in this way
document.getElementById("areaname_fill").value=area;
document.getElementById("squarename_fill").value=square;
And here
<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>
function fillsquare(area,square)
{
document.getElementById("areaname_fill").value = area;
document.getElementById("squarename_fill").value = square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>fyll i område</label>
<input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="">
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="">
</div>
<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>
It's generally recommended that you avoid using inline javascript like onClick="foo"
If possible, you should change your markup to to include the values in the button markup and then add a click event listener to extract and the data and use it in the form. Here's an example of that.
const buttons = document.querySelectorAll("button");
const areaField = document.getElementById("areaname_fill");
const squareField = document.getElementById("squarename_fill");
buttons.forEach(button => {
button.addEventListener("click", () => {
areaField.value = button.dataset.area;
squareField.value = button.dataset.square;
});
});
<div class="form-group">
<label>fyll i område</label>
<input
type="text"
name="areaname_fill"
id="areaname_fill"
class="form-control"
value=""
>
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input
type="text"
name="squarename_fill"
id="squarename_fill"
class="form-control"
value=""
>
</div>
<button class="btn btn-primary" type="button" data-area="test" data-square="1">
First button
</button>
<button class="btn btn-primary" type="button" data-area="test2" data-square="3">
Second button
</button>
Try the below code. The quotes are missing in onclick and in the document.getElementById as the test and test2 are string, and the document.getElementById expects a string argument (the element id).
function fillsquare(area, square) {
var area = area;
var square = square;
document.getElementById("areaname_fill").value = area;
document.getElementById("squarename_fill").value = square;
}
<body>
<button
class="btn btn-primary"
type="button"
onclick="fillsquare('test', 1)"
>
1
</button>
<button
class="btn btn-primary"
type="button"
onclick="fillsquare('test2', 3)"
>
1
</button>
<div class="form-group">
<label>fyll i område</label>
<input
type="text"
name="areaname_fill"
id="areaname_fill"
class="form-control"
value=""
/>
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input
type="text"
name="squarename_fill"
id="squarename_fill"
class="form-control"
value=""
/>
</div>
document.getElementById("areaname_fill").value=area;
document.getElementById("squarename_fill").value=square;
You should Add double quotes to fix it.
I'm trying to make a calculator on dividing 2 variables in javascript. But I got an error like NaN. Please take a look at my code. I'm a beginner to javascript.
<script type="text/javascript">
var p_val, d_days, total_price
function calculate() {
p_val = parseInt(document.getElementById("purchased_price").value);
d_days = parseInt(document.getElementById("days"));
total_price = parseInt(p_val/d_days);
alert(total_price);
}
</script>
<div class="box-body">
<span class="text-danger"><?php echo validation_errors() ?></span>
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">Purchased Price </label>
<input type="text" id="purchased_price" class="form-control" value="100000">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Number Of Days</label>
<input type="text" id=days" class="form-control" >
</div>
<form action="<?=base_url()?>" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Depreciation Value</label>
<input type="text" id=result" class="form-control" >
</div>
<button class="btn btn-primary" type="button" onclick="calculate()" value="calculate">Calculate</button>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-info btn-lg" >Save</button>
</div>
<div class="col-md-3">
<a href="<?=base_url()?>location/location_list/" class="btn btn-info btn-lg" >Cancel</a>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</form>
</div>
Hello,
Im try to make calculator for divide 2 variable in javascript. But I got error like NaN Please look my code. I am beginner to javascript.
Just add .value to parse the value of d_days input like you did with p_val and not the whole object
d_days = parseInt(document.getElementById("days").value);
Btw, when you get an error specifying that X var is NaN, it usually means that you tried to compute mathematically something that is not a number.
I want: when I enter in the txtbox Enter amount, then I submit the button , the amount I enter in textbox1 which is inputValue it this display in the txtbox which is totAmountPaid
html
<div class="col-md-12">
<label>Enter Amount:</label>
<input type="text" class="form-control" id="inputValue" value="">
</div>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
script
function myFunction(){
var paidAmount = parseFloat(document.getElementById("inputValue").value);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
Are you including your JS before you are trying add the onClick handler?
If you load the js beforehand it should work fine.
As you can see here https://jsfiddle.net/Lyspxwvu/1/
<script>
function myFunction(){
var paidAmount = parseFloat(document.getEle`enter code here`mentById("inputValue").v`enter code here`alue);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
</script>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
when i click on id save_newsection i need value of class school_name means school name
<div class="school_form_submit">
<div class="form-group">
<label class="control-label col-md-3">School Name<span class="required"> * </span>
</label>
<div class="col-md-9">
<input type="text" class="form-control school_name" placeholder="Please Enter School Name" value="dfghdf" name="school_name_submit">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
<button type="button" id="save_newsection" class="btn green">Save changes</button>
</div>
</div>
If there is only one input with the class .school_name, use this
$("#save_newsection").click(function() {
var value = $("input.school_name").val();
// use value
});
If there could be more of them throughout the document use this:
$("#save_newsection").click(function() {
var value = $(".school_form_submit .school_name").val();
// use value
});
$("#save_newsection").click(function() {
var value = $(".school_form_submit .school_name").val();
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="school_form_submit">
<div class="form-group">
<label class="control-label col-md-3">School Name
<span class="required"> * </span>
</label>
<div class="col-md-9">
<input type="text" class="form-control school_name" placeholder="Please Enter School Name" value="dfghdf" name="school_name_submit">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
<button type="button" id="save_newsection" class="btn green">Save changes</button>
</div>
i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked false.
<form name="zhf" class="form-horizontal">
<div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
<div class="col-sm-3">
<input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
<span>Not a valid number!</span>
</p>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
</div>
</div>
</form>
vm.delete = function(index) {
vm.items.Info.splice(index, 1);
vm.item.splice(index, 1);
vm.NumberOfDays -= 1;
}
I have updated your ng-repeat section to validate form and sample is HERE
<form novalidate="novalidate" name="inputValidate">
<div ng-repeat="field in fields.test">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid number!</span>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Number Required!</span>
</div>
<div style="width:20%;float:left">
<input type="button" value="Remove" ng-click="delete($index)"/>
</div>
</div>
</div>
</form>