We Keep Coding

The output image does not appear

<form action="">
<h2>Fill out the following details: </h2>
<div class="inp">
<label for="name">Name: </label>
<input type="text" id="name">
</div>
<br>
<div class="inp">
<label for="rollno">Roll No: </label>
<input type="text" id="rollno">
</div>
<br>
<div class="inp">
<label for="image">Image: </label>
<input type="file" id="image" accept="image/jpeg">
</div>
<input type="button" id="submit" value="Submit">
</form>
<div id="output">
<h2>Your Details: </h2>
<div class="out">Name: <span id="outname"></span></div>
<div class="out">Roll No: <span id="outrollno"></span></div>
<div class="out">Image: <img id="outimage" width="200px"></div>
</div>
<script type="text/javascript">
function displayImage()
{
var x = document.getElementById("outimage");
var y = document.getElementById("image").src;
x.setAttribute("src",y);
}
document.getElementById("submit").onclick = function()
{
document.getElementById("output").style.display = "block";
document.getElementById("outname").innerHTML = document.getElementById("name").value;
document.getElementById("outrollno").innerHTML = document.getElementById("rollno").value;
displayImage();
}
</script>
Can someone tell me why is this happening? The image is in the same folder as the HTML file. Is there a better way to achieve this? I want to display the image that is selected in the form by the user.

You need to make sure that you read the content of the image file which is being uploaded. use filereader and then readAsDataURL and once the content is loaded by filereader assign that as source to preview image placeholder.
function readURL() {
// just to avoid the error since i dont know what readURL is doing nor it is mentioned in the OP.
}
function displayImage() {
var x = document.getElementById("outimage");
var file = document.getElementById('image').files[0]
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function(e) {
x.setAttribute("src", this.result);
}
}
document.getElementById("submit").onclick = function() {
document.getElementById("output").style.display = "block";
document.getElementById("outname").innerHTML = document.getElementById("name").value;
document.getElementById("outrollno").innerHTML = document.getElementById("rollno").value;
displayImage();
}
<form action="">
<h2>Fill out the following details: </h2>
<div class="inp">
<label for="name">Name: </label>
<input type="text" id="name">
</div>
<br>
<div class="inp">
<label for="rollno">Roll No: </label>
<input type="text" id="rollno">
</div>
<br>
<div class="inp">
<label for="image">Image: </label>
<input type="file" id="image" accept="image/jpeg" onchange="readURL(this)">
</div>
<button type="button" id="submit">Submit
</button>
</form>
<div id="output">
<h2>Your Details: </h2>
<div class="out">Name: <span id="outname"></span></div>
<div class="out">Roll No: <span id="outrollno"></span></div>
<div class="out">Image: <img id="outimage" width="200px"></div>
</div>

displaying the input value of txtbox1 to txtbox2

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>

jQuery val() doesn't update value in .html()

I have an HTML page generated with some default values for input fields. Here is the HTML and JavaScript:
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').val("Young man");
content.find('#age').val("25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
I am trying to get the div assigned to a variable, then change the values of name and age through this handle. The first alert method confirms that they are changed. But why is content.html() still outputs the original html? How can I make html() output the updated data?

jQuery .val() method never updates the value attribute. You can change it with .attr() method.
$('#trigger').click(function() {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>

Assign the new value using attr().
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
console.log(content.find('#name').val());
console.log(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>

getting input from button not working

Below is my html code for the form
<form id="taxi_distance_input" >
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
And in the bottom of the page I give the
<script src="/js/form_input_parameter.js"></script>
Inside the form_input_parameter.js i have written the script
$(document).ready(function(){
$('#myButton').click(function(){
var text = $("#usr").val();
alert(text+"success");
});
But it is not working .Any help is apprecited

You've forgotten the }); at the end of your JS code
The input tag should end with />
$(document).ready(function() {
$('#myButton').click(function() {
var text = $("#usr").val();
alert(text + " success");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr" />
<input type="button" class="btn btn-success" value="Submit" id="myButton" />

Javascript: Input bar isn't working or giving any result

I made a program that asks the user how many input bars he wants to display and then the user has to type in some values into the input bars and click verify but the issue i am having is that whenever i click on verify, nothing happens. I get the error:
Uncaught TypeError: Cannot read property 'value' of null
whenever i click on verify.
Here are my codes:
<html>
<head>
<script language="javascript">
var x = [];
var choose;
var i;
var xar=[];
choose=parseFloat(prompt("how many inputs u want to display"));
for(i=0;i<choose;i++)
x[i]=document.getElementById("cont"+i).style.visibility="visible";
function hola() {
for(i=0;i<choose;i++)
document.getElementById("cont"+i).style.visibility="visible";
}
function verify(){
for(i=0;i<choose;i++){
xar[i]=document.getElementById("userNumber"+i).value;
}
for(i=0;i<choose;i++)
if(xar[i]==i)
alert("good");
else
alert("wrong");
}
</script>
</head>
<body>
<input type="button" onclick="hola()" value="hidefield0" id="boton0">
<div id="cont0" style="visibility: hidden;">
<input type="text" id="userNumber" class="something">
</div>
<input type="button" onclick="hola()" value="hidefield2" id="boton1">
<div id="cont1" style="visibility: hidden;" class="something">
<input type="text" id="username2">
</div>
<input type="button" onclick="hola()" value="hidefield1" id="boton2">
<div id="cont2" style="visibility: hidden;" class="something">
<input type="text" id="username3">
</div>
<input type="button" onclick="hola()" value="hidefield3" id="boton3">
<div id="cont3" style="visibility: hidden;" class="something">
<input type="text" id="username4">
</div>
<input type="button" onclick="hola()" value="hidefield4" id="boton4">
<div id="cont4" style="visibility: hidden;" class="something">
<input type="text" id="username5">
</div>
<input type="button" onclick="hola()" value="hidefield5" id="boton5">
<div id="cont5" style="visibility: hidden;" class="something">
<input type="text" id="username6">
</div>
<input type="button" id="verifyBtn" value="verify" onclick="verify()">
</body>
<html>

The script is failing when it reaches this portion:
document.getElementById("userNumber"+i)
This indicates that there is no element called userNumber + i (i.e. "userNumber3") for you to then call the .value property of (Cannot read property 'value' of null) .
And that's because you have elements with ids of "username2, username3, username4, etc." and "userNumber", but not "userNumber" plus a number.
var x = [];
var choose;
var i;
var xar=[];
choose=parseFloat(prompt("how many inputs u want to display"));
for(i=0;i<choose;i++)
x[i]=document.getElementById("cont"+i).style.visibility="visible";
function hola() {
for(i=0;i<choose;i++)
document.getElementById("cont"+i).style.visibility="visible";
}
function verify(){
for(i=0;i<choose;i++){
xar[i]=document.getElementById("userNumber"+i).value;
}
for(i=0;i<choose;i++)
if(xar[i]==i)
alert("good");
else
alert("wrong");
}
<input type="button" onclick="hola()" value="hidefield0" id="boton0">
<div id="cont0" style="visibility: hidden;">
<input type="text" id="userNumber" class="something">
</div>
<input type="button" onclick="hola()" value="hidefield2" id="boton1">
<div id="cont1" style="visibility: hidden;" class="something">
<input type="text" id="userNumber2">
</div>
<input type="button" onclick="hola()" value="hidefield1" id="boton2">
<div id="cont2" style="visibility: hidden;" class="something">
<input type="text" id="userNumber3">
</div>
<input type="button" onclick="hola()" value="hidefield3" id="boton3">
<div id="cont3" style="visibility: hidden;" class="something">
<input type="text" id="userNumber4">
</div>
<input type="button" onclick="hola()" value="hidefield4" id="boton4">
<div id="cont4" style="visibility: hidden;" class="something">
<input type="text" id="userNumber5">
</div>
<input type="button" onclick="hola()" value="hidefield5" id="boton5">
<div id="cont5" style="visibility: hidden;" class="something">
<input type="text" id="userNumber6">
</div>
<input type="button" id="verifyBtn" value="verify" onclick="verify()">