How to multipy numbers between a field and a new created field - javascript

Please i have a problem here in my work i have an input field and have a button that i use to create new input field with onclick event, but my problem is how to multiply numbers in both input fields and alert the answer.
function create(){
var main_input = document.getElementById("main_input").value,
newinput = document.createElement('input');
newinput.placeholder = "test1";
newinput.value;
document.getElementById("mytest").appendChild(newinput);
}
function multiply(){
var ans = newinput * main_input;
alert(ans);
}

In the absence of clarity, I am posting this solution. Looks like you are not clear on few concepts so let me try to explain them:
You need to move your variables outside the scope of create() so that they are available in the multiply() function.
You cannot just multiply two input fields. You need to take the values from them as shown in the code below.
Hopefully it helps you in moving ahead!
var main_input,newinput;
function create(){
main_input = document.getElementById("main_input");
newinput = document.createElement('INPUT');
newinput.placeholder = "test1";
newinput.value = 10;
document.getElementById("mytest").appendChild(newinput);
}
function multiply(){
var ans = newinput.value * main_input.value;
alert(ans);
}
create();
multiply();
<input id="main_input" value=10 />
<div id="mytest"></div>

Use eval() or you can manually multiply the values like input1.value * input2.value
function create(){
// this is unnecessary, you are creating a new element
// var main_input = document.getElementById("main-input");
var newinput = document.createElement('input');
newinput.placeholder = "test1";
newinput.id = 'test1'; // give the element an id, to access it later by id
// newinput.value; // this too is unnecessary, you'll get the value from the user
if (!document.getElementById('test1')) {
// append the child only if it doesn't exist
document.getElementById("mytest").appendChild(newinput);
}
}
function multiply(){
var newinput = document.getElementById('test1');
var mainInput = document.getElementById("main_input");
alert(eval(newinput.value + '*' + mainInput.value));
// alert(newinput.value * mainInput.value) you can also use this method
}
<div id="mytest">
<input type="text" id="main_input">
</div>
<button onclick="create()">Create</button>
<button onclick="multiply()">Multiply</button>

Related

Using JS to generate a list of HTML elements. addEventListener only applying to last element [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 3 years ago.
I have the following HTML written. The idea is that I can add items to the list at the top, and then generate a field which includes a name, checkbox, and text field. The text field is to be enabled/disabled depending on the checkbox. In my javascript, the toggle function is assigned to the onclick attribute of the checkbox field, but it only works on the last item on the list. Can anyone tell why this functionality isn't being assigned to all the checkboxes? If you open the resulting html code in a browser, it shows no onclick events for any checkboxes except the last one, so it appears it isn't being added. Does it somehow get removed from the previous one when I assign it to the next? How would I fix it? Thank you.
<!DOCTYPE html>
<html>
<body onload="loadAllSettings()" }>
<script>
var genOptFields = ["genField1", "genField2"];
function loadAllSettings() {
loadSettingsList("genSet", genOptFields);
}
</script>
<h2>Options</h2>
<form>
<fieldset id="genSet">
<legend>General</legend>
</fieldset>
</form>
<script>
function loadSettingsList(parentId, optionalFields) {
var fieldset = document.getElementById(parentId);
for (fieldId of optionalFields) {
var p = document.createElement('p');
p.append(fieldId + ":");
var input = document.createElement('input');
input.type = "text";
input.disabled = true;
input.id = fieldId;
var cb = document.createElement('input');
cb.type = "checkbox";
cb.id = "cb_" + fieldId;
cb.addEventListener("click", function () {
toggleCheck(fieldId);
});
p.appendChild(cb);
p.appendChild(input);
fieldset.appendChild(p);
}
}
function toggleCheck(fieldId) {
document.getElementById(fieldId).disabled = !document.getElementById("cb_" +
fieldId).checked;
}
</script>
</body>
</html>
As explained below, your fieldId reference isnt static. As a result when calling toggle check it was always passing the last value that fieldId contained no matter what (double check this by console.logging your fieldId passed to toggle check)
function loadAllSettings() {
const genOptFields = ["genField1", "genField2"];
loadSettingsList("genSet", genOptFields);
}
function loadSettingsList(parentId, optionalFields) {
const fieldset = document.getElementById(parentId);
optionalFields.forEach(function (fieldId) {
createParagraph(fieldId, fieldset);
});
}
function createParagraph(fieldId, fieldset) {
const p = document.createElement('p');
p.append(fieldId + ":");
createCheckbox(p, fieldId);
createInputField(p, fieldId);
fieldset.appendChild(p);
}
function createInputField(p, fieldId) {
const input = document.createElement('input');
input.type = "text";
input.disabled = true;
input.id = fieldId;
p.appendChild(input);
}
function createCheckbox(p, fieldId) {
const cb = document.createElement('input');
cb.type = "checkbox";
cb.id = "cb_" + fieldId;
//set this attribute to capture value
cb.setAttribute('data-fieldId', fieldId);
cb.addEventListener("click", function () {
//use static data attribute value instead of fieldId var which isnt static
toggleCheck(this.getAttribute('data-fieldId'));
});
p.appendChild(cb);
}
function toggleCheck(fieldId) {
document.getElementById(fieldId).disabled = !document.getElementById("cb_" + fieldId).checked;
}
<!DOCTYPE html>
<html>
<body onload="loadAllSettings()" }>
<h2>Options</h2>
<form>
<fieldset id="genSet">
<legend>General</legend>
</fieldset>
</form>
</body>
</html>
Since you are generating the element using body on-load event, click event become static. That is why element is always pointing to the last child. You can simply achieve your requirement by passing element scope(this) into the click event.
Here is the working solution:
<body onload="loadAllSettings()" }>
<script>
var genOptFields = ["genField1", "genField2"];
function loadAllSettings() {
loadSettingsList("genSet", genOptFields);
}
</script>
<h2>Options</h2>
<form>
<fieldset id="genSet">
<legend>General</legend>
</fieldset>
</form>
<script>
function loadSettingsList(parentId, optionalFields) {
var fieldset = document.getElementById(parentId);
for (fieldId of optionalFields) {
var p = document.createElement('p');
p.append(fieldId + ":");
var input = document.createElement('input');
input.type = "text";
input.disabled = true;
input.id = fieldId;
var cb = document.createElement('input');
cb.type = "checkbox";
cb.id = "cb_" + fieldId;
cb.addEventListener("click", function () {
toggleCheck(this);
});
p.appendChild(cb);
p.appendChild(input);
fieldset.appendChild(p);
}
}
function toggleCheck(ele) {
ele.nextElementSibling.disabled = !ele.checked;
}
</script>
</body>

Can i call another function inside the GetElement in Javascript

I am trying to call another function inside the getElement but it is not working everything when i change my selection. When i select Car, in the textbox my varxumb should populate. Any idea...
document.getElementById("mycall1").insertRow(-1).innerHTML = '<td><select id = "forcx" onchange="fillgap()"><option>Select</option><option>Force</option><option>Angle</option><option>Area</option></select></td>';
function fillgap() {
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
if (forcxlist == "Force") {
document.getElementById("result1").value = xnumb;
}
}
I don't know how this "Force" value is coming to check.
you can try these solutions.
if (forcxlist == "Force")
instead use
var forcxlistText = forcxlist.options[forcxlist.selectedIndex].text;
if (forcxlistText == "Force")
or use value technique
<div id ="mycall1">
</div>
<div id ="result1">
</div>
<script>
document.getElementById("mycall1").innerHTML = '<td><select id = "forcx" onchange="fillgap(this.value)"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';
function fillgap(value){
var xnumb = 20;
if (value == "2"){
document.getElementById("result1").innerHTML = xnumb;
}
}
</script>
or use
<div id ="mycall1">
</div>
<input type="text" id="result1" value=""/>
<script>
document.getElementById("mycall1").innerHTML = '<td><select id = "forcx"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';
document.getElementById("forcx").onchange = function (){
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
var forcxlistValue = forcxlist.options[forcxlist.selectedIndex].value;
if (forcxlistValue == "2"){
document.getElementById("result1").value = xnumb;
}
}
</script>
The forcxlist variable is an element object, returned by the document.getElementById method. Afterwards, you are checking if this element object is equal to "Force", which is a string (meaning the contents of your if block will never be executed). Did you mean to check if the contents of that object are equal to Force?
Instead of
if (forcxlist == "Force"){
use
if (forcxlist.innerHTML == "Force"){
I hope this helps!
Can't use innerHTML so i changed it to .value
document.getElementById("result1").value = xnumb;
There are a couple issues here.
First, you are expecting forcxlist to be a string, not an element, so you need to use .value to get the selected value of the dropdown.
Second, you should do your comparison with === not ==, as this ensures type equality as well, and is best practice.
I would also recommend building your select using HTML elements. It keeps things cleaner, is more readable, and is easier to maintain.
Since you are using the same id for the select, you would have to change the selector in your fillgap handler to var forcxlist = e.target.value;, this way the event will fire based on only the select that you are interacting with, regardless of how many rows you have in the table.
Updated code is below, and an updated working fiddle here. As per your comment about adding additional rows, the fiddle has this working as well.
<input type="button" value="Add Row" onclick="addDropDown()">
<table id="mycall1"></table>
<script>
function addDropDown() {
var tbl = document.getElementById("mycall1");
var newRow = tbl.insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.appendChild(createDropDown("forcx", fillgap));
}
function createDropDown(id, onchange) {
var dd = document.createElement('select');
dd.id = id;
dd.onchange = onchange;
createOption("Select", dd);
createOption("Force", dd);
createOption("Angle", dd);
createOption("Area", dd);
return dd;
}
function createOption(text, dropdown) {
var opt = document.createElement("option");
opt.text = text;
dropdown.add(opt);
}
function fillgap() {
var xnumb = 20;
var forcxlist = e.target.value;
if (forcxlist === "Force") {
document.getElementById("result1").value = xnumb;
}
}
</script>
<input type="text" id="result1">

Javascript function not defined in jQuery

I have problems with a simple bit of code. I'm trying to take a value from an input field and then do a simple calculation. The calculation is supposed to take place with an onSubmit command and then append it to a p tag.
HTML:
<h1 class="titleHead">Calculator</h1>
<form method="POST" action="#" onSubmit="depositCal()">
<input type="text" name="money" id="money">
<input type="submit" value="How much" onSubmit="">
</form>
<div>
<p class="answer"></p>
</div>
Javascript:
$(document).ready(function() {
var numberOne = $('#money').val(),
numberTwo = 4;
var finalNumber = numberOne + numberTwo;
function depositCal() {
$('.answer').append(finalNumber);
}
})
I get back function not defined when it runs.
I know this is probably very simple but any help would be greatly appreciate.
Try this:
Give your form a name and ID e.g. 'myForm'
JS
$('#myForm').submit(function(e){
e.preventDefault();
var numberOne = $('#money').val();
var numberTwo = 4;
var finalNumber = numberOne + numberTwo;
$('.answer').append(finalNumber);
});
e.preventDefault() - stops the form from submitting (thus refreshing the page) and the function is only fired when submit is clicked.
Addition
numberOne is getting it's value from a form field so it sees it as a string.
To prevent this use this line instead:
var numberOne = parseFloat($('#money').val());
Which forces the value to be a (float) number.
You need to declare the function in global scope if you want to use it in inline js
$(document).ready(function() {
var numberOne = $('#money').val(),
numberTwo = 4;
var finalNumber = numberOne + numberTwo;
})
function depositCal() {
$('.answer').append($('#money').val() + 4);
}
You could also make it a global function by attaching the function to window object.
I think you don't need $(document).ready here and do calculation of finalNumber inside function so that it will give you the correct value of money input, otherwise you will get NaN or empty value-
function depositCal() {
var numberOne = $('#money').val(),
numberTwo = 4;
var finalNumber = numberOne + numberTwo;
$('.answer').append(finalNumber);
}
You have to keep the depositCal function definition out of $(document).ready(),because first the whole document is loaded,then $(document).ready() is called.So while loading the form,browser finds depositCal as undefined as it is defined after document is fully loaded......So keep the depositCal definition in global scope

Modify variable from input and place in new div based on input variable

This is related to my last questions, but that already had alot of answers so I did not want to modify it with more stuff to avoid confusion.
I can take the input from the input text with the id 'test', and I can display it on the div labeled 'result', but I am not able to modify the output to div
function createLinks()
{
var input = document.getElementById('test')
if(str.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin.value;
}
The HTML is working currently as follows:
<input type="text" id="test" size="16" title="Coming Soon" onkeypress="createLinks()"/>
<input type="submit" style="margin-left: 10px;" value="Search" class="button1"/>
<div id="result"></div>
I work with mainly CGI and have very limited knowledge of JS so I am probably missing something simple or this plain wont work. Thanks for the help in advance.
I fixed your code to what I think you wanted:
function createLinks()
{
var lin;
var input = document.getElementById('test');
if(input.value.indexOf("VALUE")>=0){
lin = "something";
}
else {
lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}
What was wrong was that:
[1] str was not defined
[2] lin was not globally defined, so you couldn't access it.
I updated the code so that it will make result say something if the textbox has VALUE typed in it and somethingelse if it doesn't, and that you can also press the Search button instead of pressing a key.
Try This: str not defined and lin is the value.
function createLinks()
{
var input = document.getElementById('test')
if(input.value.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}

Display value of textfield onChange using Javascript

What I want to do is whenever I type a value in the text field, the value typed will be displayed right away.
How do I do it exactly? Is there anyway I could put the value in a variable and use it right away without using onClick?
Here is how I would do it:
<script>
function change(){
var el1 = document.getElementById("div1");
var el2 = document.getElementById("text");
el1.innerHTML = el2.value;
}
</script>
<input type="text" id="text" onkeypress="change()">
<div id="div1"></div>
I don't think you can do it without any events.
Maybe you can do it with HTML5's <output> tag. I don't know it very well, but try some research.
W3Schools have some good examples.
Hope this can help you
Without using the change event? Why on earth would you want this? The only alternative I can think of would be polling at an interval. Something like:
var theValue = "";
var theTextBox = document.getElementById('myTextBox');
// Run 10 times per second (every 100ms)
setInterval(function() {
// Check if the value has changed
if(theTextBox.value != theValue)
{
theValue = theTextBox.value;
}
}, 100);
<script>
function change(){
var el1 = document.getElementById("div1");
var el2 = document.getElementById("text");
el1.innerHTML = el2.value;
}
function changenew(){
var el1 = document.getElementById("div1");
var el2 = document.getElementById("text");
el1.innerHTML = el2.value;
}
</script>
<input type="text" id="text" onkeypress="change()" onchange="changenew()">
is it Possible
you can check to see if your input field is in focus, then listen for any key input events and update your display field with the appropriate characters.
html:
​<input type="text" id="myText"/>
<span id="output"></span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
js:
var myText = document.getElementById("myText");
myText.onkeyup = function(){
var output = document.getElementById("output");
output.innerHTML = this.value;
}
demo : http://jsfiddle.net/seUBJ/
​

Categories

Resources