This javascript code to concatenate isn't working. I tried an alert before closure of script tag, it's displayed but the code below that I want to display the result in third or different text field.
HTML:
<input type="text" id="field"><br>
<input type="text" id="str2"><br>
<input type="text" id="str3"><br>
<button onclick="concate()">Concatenate</button>
JavaScript:
var s=document.getElementById("field").value;
var t=document.getElementById("str2").value;
var st=document.getElementById("str3").value;
function concate()
{
st=s+t;
document.getElementById("str3").value.innerHTML=st;
console.log(st);
document.write(st);
}
There's no function .value.innerHTML should be :
document.getElementById("str3").value = st;
Also you should get the fields value inside function and close your function definition using }, check example bellow.
Hope this helps.
function concate()
{
var s=document.getElementById("field").value;
var t=document.getElementById("str2").value;
document.getElementById("str3").value=s+t;
}
<input type="text" id="field"><br>
<input type="text" id="str2"><br>
<input type="text" id="str3"><br>
<button onclick="concate()">Concatenate</button>
function concate() {
var s=document.getElementById("field").value;
var t=document.getElementById("str2").value;
var st=document.getElementById("str3").value;
// this is a standard way to concatenate string in javascript
var result = s+t;
document.getElementById("str3").value=result;
}
<input type="text" id="field"><br>
<input type="text" id="str2"><br>
<input type="text" id="str3" readonly><br>
<button onclick="concate()">Concatenate</button>
Related
I have the following code for html:
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="ouput_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup',function(){
output_01.value = input_01.value
})
</script>
I want to display the input value as the output. However, I found that the command "output_01.value = input_01.value" doesn't work and there is nothing displayed. I do not know why and do not know how to solve this problem. How can I display the content of an input in 'ouput_01'? Thank you.
make sure you don't have typo in your code.
change from
<input type="text" name="" id="ouput_01">
to
<input type="text" name="" id="output_01">
your INPUT tag output ID does not match the one on your javascript DOM and this output_01.value = input_01.value is wrong, instead you should add event to your function parameter in your Event Listener then assign your event.target.value to your output DOM value
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="output_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup', function(event) {
output_01.value = event.target.value
})
</script>
I am trying to change values in a button's URI to input texts values.
<div class="numcontainer">
<input required="required" onchange="getNumber()" id="cnt" type="input" name="input" placeholder="ISD">
<input required="required" onchange="getNumber()" id="wano" type="input" name="input" placeholder="Enter number">
</div>
<button type="submit" name="gowa" id="btngo" onclick="location.href='myserver://send?phone=NumberPlaceHolder'">Go!</button>
NumberPlaceHolder: Trying to concatenate values enter in both input
JS:
function getNumber() {
document.getElementById('btngo').href.replace("NumberPlaceHolder",document.getElementById('cnt').value+document.getElementById('wano').value);
}
It does not work as expected. How can I solve this?
Just an alternative, it's cleaner
const getNumber =()=> {
let val =id=> document.querySelector(id).value
console.log('myserver://send?phone='+val('#cnt')+val('#wano'))
}
//console or location.href
<div class="numcontainer">
<input required id="cnt" type="text" placeholder="ISD">
<input required id="wano" type="number" placeholder="Enter number">
</div>
<input type="button" name="gowa" id="btngo" onclick="getNumber()" value="Go!">
onChange is quite unnecessary.
You cannot have a href attribute for a button. You need to change the onclick attribute here:
function getNumber(){
document.getElementById('btngo').setAttribute("onclick", document.getElementById('btngo').getAttribute("onclick").replace("NumberPlaceHolder", document.getElementById('cnt').value+document.getElementById('wano').value));
}
It's always better to have it split like this:
function getNumber(){
curOnclick = document.getElementById('btngo').getAttribute("onclick");
wanoValue = document.getElementById('cnt').value+document.getElementById('wano').value;
newOnclick = curOnclick.replace("NumberPlaceHolder", wanoValue);
document.getElementById('btngo').setAttribute("onclick", newOnclick);
}
You should use simple
instead of
<button type="submit" name="gowa" id="btngo" onclick="location.href='myserver://send?phone=NumberPlaceHolder'">Go!</button>
To change link use this:
document.querySelector('.start a').href = 'my-new-address'
Change your input type like this type="nummber" or type="text" for getting number or text only
<input required="required" onchange="getNumber()" id="cnt" type="nummber" placeholder="ISD">
<input required="required" onchange="getNumber()" id="wano" type="number" placeholder="Enter number">
You can add click event to your button like this.
function getNumber(){
document.getElementById("btngo").onclick = function() {
var ll = "myserver://sendphone="+document.getElementById('cnt').value+document.getElementById('wano').value;
console.log(ll); // checking url in console.
location.href = ll;
};
}
here are the instructions I was given:
Include 2 textboxes for user to enter 2 numbers. Advise user to enter 0 in
the second textbox so you can display the results of division by 0. Advise
user to enter a string to see the result. The first operation is to see the
result of division by 0. The second operation is to see the result of using a
text string in a mathematical operation. Button – call the function and
display the result
my html:
<form>
Enter a number: <input type="number" id="number_box_1">
Enter a number: <input type="text" id="number_box_2">
<input type="button" value="Does Something" id="does_something" onclick="Division()">
<input type="reset">
results: <input type="text" id="math_results">
</form>
my javascript:
function Division(){
var number_1 = document.getElementById("number_box_1").value;
var number_2 = document.getElementById("number_box_2").value;
// textbox where results will be shown
var results_shown = document.getElementById("math_results").value;
results_shown = number_1/number_2;
}
I have tried several things but havent gotten it to work. I think I may need to use parseint() but even after some reading, I still not sure how to write it into my function, or if that would be the correct thing to use. I fell like theres something i should be using but unsure. what should I be using to be able to divide number_box_1 by number_box_2?
Instead of:
var results_shown = document.getElementById("math_results").value;
results_shown = number_1/number_2;
You have to use:
document.getElementById("math_results").value = number_1/number_2;
Runnable example:
function Division(){
var number_1 = document.getElementById("number_box_1").value;
var number_2 = document.getElementById("number_box_2").value;
// textbox where results will be shown
document.getElementById("math_results").value = number_1/number_2;
}
<form>
Enter a number: <input type="number" id="number_box_1">
Enter a number: <input type="text" id="number_box_2">
<input type="button" value="Does Something" id="does_something" onclick="Division()">
<input type="reset">
results: <input type="text" id="math_results">
</form>
You were storing the value of the result input instead of a reference to it, so you were just modifying a variable and not the actual value.
function Division(){
var number_1 = document.getElementById("number_box_1").value;
var number_2 = document.getElementById("number_box_2").value;
// textbox where results will be shown
var result = document.getElementById("math_results");
result.value = number_1/number_2;
}
<form>
Enter a number: <input type="number" id="number_box_1">
Enter a number: <input type="text" id="number_box_2">
<input type="button" value="Does Something" id="does_something" onclick="Division()">
<input type="reset">
results: <input type="text" id="math_results">
</form>
However, I would do something like this.
var box1 = document.getElementById("number_box_1");
var box2 = document.getElementById("number_box_2");
var result = document.getElementById("math_results");
var form = document.getElementById("form");
form.onsubmit = function(e) {
e.preventDefault(); // To disallow the form's submission
result.value = box1.value/box2.value;
}
label { display: block; }
<form id="form">
<label>Enter a number: <input type="number" id="number_box_1" required></label>
<label>Enter a number: <input type="text" id="number_box_2" required></label>
<label>results: <input type="text" id="math_results" readonly></label>
<div><input type="reset"> <input type="submit" value="Evaluate"></div>
</form>
You have to put the result into the .value property. Right now you are assigning it to the results_shown variable.
Also, you have to be careful with forms, or it might cause a page post which would appear to knock out the results.
You cannot have the errors like division by 0 or division by string based on the responses coming you have to manually check what is the results_shown and then output to the result input box.
But I guess this is the start point.
function Division(){
var number_1 = document.getElementById("number_box_1").value;
var number_2 = document.getElementById("number_box_2").value;
// textbox where results will be shown
var results_shown;
try{
results_shown = parseInt(number_1)/parseInt(number_2);
}catch(e){
results_shown = e;
}
document.getElementById("math_results").value = results_shown;
}
<form>
Enter a number: <input type="number" id="number_box_1">
Enter a number: <input type="text" id="number_box_2">
<input type="button" value="Does Something" id="does_something" onclick="Division()">
<input type="reset">
results: <input type="text" id="math_results">
</form>
So i am having the next input trough and ajax call:
var json = {
"id_u":"1",
"nombre_usuario":"JESUS",
"apellido_paterno_usuario":"DIAZ",
}
I have several text inputs with the associated name of each JSON object as follows:
<input type="text" name="id_u">
<input type="text" name="nombre_usuario">
<input type="text" name="apellido_paterno_usuario">
What i want to have a value to each input. Like this:
<input type="text" name="id_u" value="1">
<input type="text" name="nombre_usuario" value="jesus">
<input type="text" name="apellido_paterno_usuario" value="diaz">
I know that i can do with jQuery with jQuery function:
$("[name=]").val();
The problem is that i have a lot of fields to complete. Si i would like to do it faster.
Any ideas?
Thanks
Try this.
<input type="text" name="id_u">
<input type="text" name="nombre_usuario">
<input type="text" name="apellido_paterno_usuario">
<script>
var json = {
"id_u":"1",
"nombre_usuario":"JESUS",
"apellido_paterno_usuario":"DIAZ"
};
for (var key in json) {
if (json.hasOwnProperty(key)) {
$("[name=" + key + "]").val(json[key]);
}
}
</script>
http://jsfiddle.net/GCy2a/
I have an html form with two input fields, in first one user puts name of first town, and in other second town, after form is submitted users gets directions how to go from first town to second town.
I want to enable user to click button "Change directions" and to automatically change first town name into second and second town name into first and vise versa. ( A to B, B to A)
I guess i'm supposed to use javascript, but I'm new at it and can't get a clue anywhere.
Can anyone help me please?
input type="text" size="25" id="fromAddress" name="from"
value=""/>
<input name="submit1" type="submit" value="Change directions" />
<input type="text" size="25" id="toAddress" name="to"
value="" />
<input name="submit" type="submit" value="OK" />
You can create new button <button id="change">Change</button>
And then add onclick event to it.
document.getElementById('change').onclick = function() {
var tmp = document.getElementById('fromAddress').value;
document.getElementById('fromAddress').value = document.getElementById('toAddress').value;
document.getElementById('toAddress').value = tmp;
};
Take a look here: http://jsfiddle.net/xskKn/
Below is the sample code of what you want to achieve enjoy :)
function swap1() {
var data1 = document.getElementById("fromAddress").value;
var data2 = document.getElementById("toAddress").value;
document.getElementById("fromAddress").value = data2;
document.getElementById("toAddress").value = data1;
document.getElementById("swap_button").onclcik = function () {swap2()};
}
function swap2() {
var data1 = document.getElementById("toAddress").value;
var data2 = document.getElementById("fromAddress").value;
document.getElementById("toAddress").value = data2;
document.getElementById("toAddress").value = data1;
document.getElementById("swap_button").onclcik = function () {swap2()};
}
<input type="text" size="25" id="fromAddress" name="from" value=""/>
<input id="swap_button" type="button" value="Change directions" onclick="swap1()" />
<input type="text" size="25" id="toAddress" name="to" value="" />
<input name="submit" type="submit" value="OK" />
I would recommend jQuery if you are a beginner.
jQuery('#submit1').click(function() {
var fromAddress = jQuery('#fromAddress').val();
var toAddress = jQuery('#toAddress').val();
jQuery('#fromAddress').val('toAddress');
jQuery('#toAddress').val('fromAddress');
});
This is just a quick sample of how you could do it. You will need the jQuery library, and I would recommend a basic knowledge of jQuery .
http://jquery.com/