Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
var gstper=document.getElementById('gstper').value
var total=document.getElementById("totalamount").value;
var gstamount = gstper*total/100;
document.getElementById('gstamount').value= gstamount;
document.getElementById('gsttotal').value=gstamount+total;
this is my source code which was i tried.
<!DOCTYPE html>
<html>
<body>
Value1: <input type="text" id="myvalue1" value="">
Value2: <input type="text" id="myvalue2" value="">
<p id = "myText"></p>
<p>Click the button to change the value of the text field.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
v1 = parseInt(document.getElementById("myvalue1").value);
v2 = parseInt(document.getElementById("myvalue2").value);
document.getElementById("myText").innerText = v1+v2;
}
</script>
</body>
</html>
If you are setting the final value in html element like paragraph,heading tag then use .innerText or .innerHTML and if you are using another input text box to display then only use .value attribute with document.getElementById().
Do you parse your input value? Because your "document.getElementById('gstper').value" return a string, so try with this:
let gstper= parseInt(document.getElementById('gstper').value);
let total=parseInt(document.getElementById("totalamount").value);
let gstamount = gstper*total/100;
document.getElementById('gstamount').value= gstamount;
document.getElementById('gsttotal').value=gstamount+total;
2 more things:
1) you missed a ";" after the first line
2) use "let" instead of var, is safier
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
I am building a web app and I need to copy an HTML div and everything inside it into a new tab. I am writing this code in JavaScript. So far I have been working on creating a blob and then creating a file to download. This approach copies all the HTML code I need BUT it does not copy the text that has been inputted into any text fields. As I understand, the problem is that the entered text is not part of the HTML code so it cannot be copied. However I cannot find another approach to this, please assist. Thank you
You can use Element.setAttribute() on those elements before serializing your DOM tree. For example:
input.setAttribute("value", input.value)
This will copy the mutable value (not serializable) to the attribute (which is serializable).
Here's a snippet demonstration:
const input = document.querySelector('input');
console.log('initial:', input.outerHTML);
input.value = 'hello world';
console.log('before:', input.outerHTML);
input.setAttribute('value', input.value);
console.log('after:', input.outerHTML);
<input type="text">
(Inspired by comment by #vanowm)
First, copy the html (say inside a DIV)
Then you'll need loop through all input fields and read their value so you can apply them.
So the code is like this (amend to suit your further needs):
<div id=container><html>
<input type=text name=text1 id="text1">
<br><input type=text name=text2 id="text2">
</html></div>
<textarea id=target style="width:100%;height:200px;"></textarea>
<input type=button name=go onclick="trigger();" value="Parse">
<script>
function trigger(){
target0=document.getElementById('container').innerHTML;
text1= document.getElementById("text1").value;
text2= document.getElementById("text2").value;
target0=target0.replace('id="text1"', 'id="text1" value="' + text1 + '"');
target0=target0.replace('id="text2"', 'id="text2" value="' + text2 + '"');
document.getElementById("target").innerHTML=target0;
}
</script>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have this element, it is auto generated by mcssl checkout form. It is a custom field. I'm trying to select it using javascript like so:
var form_field_gclid = document.getElementById("#ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_gclid);
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
But I'm getting null as a result. I've tried also, document.querySelectorAll(...); but the same result. It's working when I tried it from console but I'm wondering why it won't work if it's on page javascript. Any ideas would be appreciated. Thank you.
I tried getting rid of the # sign but same result.
<script type="text/javascript">
(function() {
var form_field_test = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_test);
}());
</script>
This is the full script I'm using.
You do not need the # in your call to document.getElementById. Simply remove it.
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");
If you were using jQuery, however, you would need it:
var myElement = $('#myElementId');
But since you are using vanilla JS, simply pass in the element's id as a string.
You have to put the script below the html of the input you are trying to hook.
If the form is not rendered the script will return null.
In your webpage you run the script before the input form is rendered.
I think you are looking for the input value. Right?
Also i added a button for you to give you an example about how to add more functionality. For example, how to add a background color to your input
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").value;
console.log(form_field_gclid);
// add color to your input
function addColor(){
form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").style.backgroundColor = "green";
}
If you mean to get the value of the input, i think you are looking for this:
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text" value="1">
<button onclick="addColor();">change color</button>
You could try this old school vanilla ::
var form_field_gclid = ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox;
console.log( form_field_gclid );
<input type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I understand how to use input into html to call javascript defined in the same directory as the html ex:
<input type="button" value="Submit" onclick="someFunc(500)" >
so if the button is clicked the java script will run someFunc(500), is there a way to take text input, and when a button is pressed use this input as a parameter value for the java script? I know this won't work and I'm not even defining a button, but something like
<input type="text" id= "example" onclick="someFunc(this.value)">
where example is the data that was put into the input text field?
What about using a listener?
var example = document.getElementById("example");
example.onclick = function(){
someFunc(example.value);
}
You can do this with jQuery: See this jsfiddle
HTML:
<input type="text" id="example" value="12345">
JavaScript:
$('#example').on('click',function() {
console.log($(this).val()); // 12345
});
The HTML 5 Recommended way, is to use data-* attributes. Like this:
HTML:
<div id="example2" data-product-id="my-product-1"></div>
<button id="getProductId">Get Product Id</button>
JavaScript:
$('#getProductId').on('click',function() {
console.log($('#example2').attr('data-product-id')); // my-product-1
});
<script type="application/javascript">
function someFunc() {
var value = document.getElementById('example').value;
// do something with value here
return false;
}
</script>
<input type="text" id="example">
<input type="button" value="Submit" onclick="someFunc()" >
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to program a calculator, but I can't find the bug in my code. Here's my code:
<html>
<head>
<title>*</title>
</head>
<body>
<form>
<input type="number" placeholder="Enter a number" id="val1"><br>
times<br>
<input type="number" placeholder="Enter a number" id="val2"><br>
<input type="button" value="Calulate" onClick="myFunction()">
<script>
function myFunction(){
var val1 = document.getElementById(val1)value;
var val2 = document.getElementById(val2)value;
var result = val1*val2;
alert("The result " + result);
}
</script>
</form>
</body>
</html>
If you know how, and want to, can you help me to make it a calculator for +,-,:,* etc all in one? Thank you very much!
You are missing a dot(.), and the selector is wrong use "#id" for ids and ".class" for classes.
var val1 = document.getElementById("#val1").value;
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Hi I am trying to write a simple calculation that will average the two numbers entered by user input and then click the average button to get the average of the two. MY problem is that it does not produce an answer. Here is the code
<html>
<body>
<input type="text" id="one">
<input type="text" id="two">
<input type ="button" onclick="average()"value="average">
<input type="text" id ="avg">
<script type"text/javascript">>
function average(){
var a=parseInt(document.getElementById("one".value);
var b=parseInt(document.getElementById("two".value);
var afinal=((a+b)/2);
document.getElementById('avg').value=afinal;
}
</script>
</body>
</html>
Typo fix (missing bracket for getElementById):
var a=parseInt(document.getElementById("one").value);
var b=parseInt(document.getElementById("two").value);
and another typo:
<script type"text/javascript">>
should be:
<script type"text/javascript">
so, the final code is:
<html>
<body>
<input type="text" id="one">
<input type="text" id="two">
<input type ="button" onclick="average()"value="average">
<input type="text" id ="avg">
<script type"text/javascript">
function average(){
var a=parseInt(document.getElementById("one").value);
var b=parseInt(document.getElementById("two").value);
var afinal=((a+b)/2);
document.getElementById('avg').value=afinal;
}
</script>
</body>
</html>
Instead of writing the old-school document.getElementById(), consider using an industry-standard, broadly adopted jQuery library, specifically its method called $.
There, you'll be able to use a CSS selector to get to an element that you want. It's extremely powerful, I recommend learning it.
var a = $("#one").val();
It is just a typo fix,
instead of
var a=parseInt(document.getElementById("one".value);
var b=parseInt(document.getElementById("two".value);
the code becomes,
var a=parseInt(document.getElementById("one").value);
var b=parseInt(document.getElementById("two").value);