Can't execute function in javascript - javascript

I've looked a lot in this website for an answer and honestly I've seen many close answers to my problem but still can't make it work.
I want to use a input textbox value and put it in javascript function then use javascript to calculate what I've given to the textbox for me and then put the answer to another paragraph in my html document (in this case I want to use kmh=ms*3.6 with return to do the calculation)
So this is my function code:
function msToKM() {document.getElementById('mstokm').innerHTML='<input type="text" name="mstokm" id="mstokmh" value="10"/>m/s<br><br><button type="button" class="buttons" onclick="convMSKM()" style="padding: 10px 10px;">Equals to!</button>';}
function convMSKM () {mstokm= document.getElementById('mstokmh'); mstokmA(mstokm);}
function mstokmA(ms) {return kmh= ms*3.6; document.getElementById('AmstokmA').innerHTML=kmh;}
And I'm specificly having a problem with this part of the code:
function mstokmA(ms) {return kmh= ms*3.6; document.getElementById('AmstokmA').innerHTML=kmh;}
because it's not executing the last part of it.
I can provide the html codes as well if needed.
How can I fix this?

Here's a demo how to do it
Well with onclick event i am selecting value of input field and than printing result in console. you can place it to any element you want instead of printing to console.
function handle(){
let val = document.getElementById('userIn').value;
console.log(3.6*val)
}
<input type='text' value='' id='userIn'/>
<button onclick='handle()'>calculate</button>

The return statement causes the function to stop executing, so what is happening is that you are returning value and it never gets to set that value inside the element. You can do something like this:
mstokmA(ms) {
document.getElementById('AmstokmA').innerHTML = ms*3.6;
}
OR more like you were trying to do:
mstokmA(ms) {
var kmh = ms*3.6; // set value inside variable
document.getElementById('AmstokmA').innerHTML = kmh; // append that value to the element
}
I prefer the first option.
I hope it helps ;).
Note: there is no need to return in this case.

Leave the return statement where it it, but replace "return" with "let".
Example:
function mstokmA(ms) {let kmh= ms*3.6; document.getElementById('AmstokmA').innerHTML=kmh;}

Related

Make Function with querySelectAll with forEach

I want to create a javascript querySelectAll with foreach. I need to use this many times. So i want to create a function. But not working. Please help me.
<p id="o">one</p>
<p id="o">two</p>
<script>
function q(x,y) {
document.querySelectorAll(x).forEach(e => { e.y })
}
q('#o', innerHTML = 'Working');
</script>
If you want to put some code in a reusable form that you can pass around then it needs to be a function.
An expression is just going to be evaluated immediately.
innerHTML = 'Working' will assigned the string to the global variable innerHTML and then the pass the result (the string) to y.
You need it to be a function and then you need to call it.
What's more: An ID must be unique in a document. If you want to loop over a group of things then use a class.
function q(x, y) {
document.querySelectorAll(x).forEach(y)
}
q('.o', (element) => element.innerHTML = 'Working');
<p class="o">one</p>
<p class="o">two</p>

Variable with an input’s value is empty when assigned outside a function

I recently created an input box in HTML:
<input type="number" id="aa" onchange="yy()">
<p id="xx"></p>
Then I called the following code:
var gg = document.getElementById("aa").value;
function yy(){
document.getElementById("xx").innerHTML = gg;
}
Nothing appeared.
However if I change the script into:
function yy(){
gg = document.getElementById("aa").value;
document.getElementById("xx").innerHTML = gg;
}
It worked!
I thought that if I declared the variable gg first (global), I could use the value in the yy function. Why does the first code not behave like the second code?
Thats because you didn't put the value inside the function. Now var gg will always hold the initial value. Which is on page load empty.
By putting it inside the function. The value will be retrieved as soon as the function gets triggered. In your case, you putted a onchange trigger on it.
So when the value changes, the function will run at that moment, and retrieves the value inside the input field.
You can only get something if you ask for it. Or in this case JavaScript can only get something if something asks for it
Your function in the first case doens't ask for a value. In your seconds case, JavaScript asks the value of element #aa
You can still use gg inside yy function. But the thing here is the value you have inside gg. Since you are calling
var gg = document.getElementById("aa").value;
on page load, the input element do not have any value so the value of gg is always blank. And now when you change the value for id="aa" you are using the value of gg for its innerHTML and you always get blank. Now, the only fix is that, since your innerHTML depends on value of gg (Which is for input with id aa), you must include this inside your change() function to get correct output. Thus, the reason is not that you cannot access or get the value of global variable- you can but in this case the value is incorrect as expected.
For proper verification and understanding here is an example that has the value of id='aa' already specified then when you change the input then you get to see the value of gg:
var gg = document.getElementById("aa").value;
function yy(){
document.getElementById("xx").innerHTML=(gg);
}
<input type="number" id="aa" onchange="yy()" value='123'>
<p id="xx"></p>

get 'for' value by javascript click

my problem is when I want get 'for' value by javascript, the javascript return only last value :/
the php
if($this->test % 2 != 0)
{
for ($z=$this->test+1;$z>=1;$z--) {
echo '<input type="submit" class="test" value="'.floor($z).'">';
}
the javascript:
$(".testi").click(function(){
var t = $(".testi").val();
alert(t);
});
why this javascript return only last value???
The JavaScript is returning only the last value because your HTML contains multiple fields with the same class name. So, you must use this in the jQuery code to get the current element that you clicked:
$(".testi").click(function(){
var t = $(this).val();
alert(t);
});
php is a string processing language, its main purpose is to output some sort of string, so the result is a set of strings.
js doesn't return anything, its just a programm which runs and reacts on some events, so there is no concatenation of strings or return values by default
Every time a click happens the function will execute, get the current value from .test1 and alert it.

Acessing value of variable in callign method in Javascript

I am learning in javascript and i want to solve this:
var text = "element1";
function OpenOrClose (text){
CKEDITOR.instances.text.getData();
}
I just want to replace text in calling method in function by value of variable text (in this case element1). I also read something about eval('text') and window['text'], but when i tryed to use it like this:
CKEDITOR.instances.eval('text').getData();
It wasn't work.
Thank you for your help
Attributes = items etc.
CKEDITOR.instances[text].getData();

How do you add a input element to a variable

I input a number into a textbox.
I want to know how do you cast this number to a declared variable:
For Example:
<body>
Please Enter value number 1: <input type = "text" id = "value1"></input>
<button onclick = "Display()">Display</button>
<p id = "Paragraph"></p>
<script>
The Question is here:
var a = document.getElementById("value1").value;
The statement above is what i want to know to do.
function Display()
{
document.write(a);
}
</script>
</body>
I am new to javascript, and i'm trying to learn so sorry if the question is a bit basic but im struggling to get this right.
I guess you mean something like this:
function Display()
{
var a = document.getElementById("value1").value;
document.getElementById( 'Paragraph' ).innerHTML = a;
}
With your code the variable a is just assigned, when the script is executed the first time. It is not a pointer to the value, but just grabs the value once. So if you want to use it, when clicking the button, you have to get it inside the executed function.
Don't use document.write() like this. If you want to display something at runtime innerHTML is a better choice!
Assign a inside your function:
function Display()
{
var a = document.getElementById("value1").value;
console.log(a);
}
Also, <input /> tags do not require a closing </input> tag.

Categories

Resources