Move image with javascript - javascript

What is wrong with this function?
function moveColor()
{
document.getElementById(purple).style.marginRight = "34px";
}
with this html:
<div><img src="images/purple.png" id="purple" onclick="colorpurple()" onmouseover="moveColor()" style="cursor:pointer;"/></div>
I also wanted to have it move over a period of 1 second, but can't seem to solve this simple problem.

You need to put the id in quotes (so that it is treated as a string).
document.getElementById('purple').style.marginRight = "34px";
The current usage means that purple refers to a variable, which is not defined so it has an undefined value and so the document.getElementById method returns nothing..

Seems like you missed the quotes on the function getElementById.
Like this:
function moveColor() {
document.getElementById('purple').style.marginRight = "34px";
}

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>

Can't execute function in 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;}

How to get JS value in UIWebView in Swift?

I've added to my HTML these lines:
"</script>$(document).ready(func a() {
$('img').click(function(){
return $(this).attr('src');
});
});</script>"
and if I set instead of return - alert, then I get what I need.
Later I've tried this on my tap recognizer function:
var a = self.webView.stringByEvaluatingJavaScriptFromString("a()")
print(a)
but it prints me an empty string. What I do wrong? Can anyone help me to fix that?
I may be a little late but AFAIK you should call "a();". You might be missing the semicolon

How to pass a string as argument JavaScript function?

I am trying to pass some HTML code as String in a Javascript function but it keeps-on being executed as HTML code and not as a parameter, even by putting the quotes to delimit it as a string.
The navigator reads the string not as parameter but as HTML code.
It's the function cancelVolet() inside the img tag, 4th line:
function editVoletVisual(r){
var x = new String(r.parentNode.parentNode.innerHTML);
var y = x.replace('"','\"');
r.parentNode.innerHTML="<input name=\"edtVolet\" type=\"text\" id=\"edtVolet\"><img src=\"ressources/images/dlt.png\" align=\"top\" id=\"canceler\" onclick=\"cancelVolet(\""+y+"\")\">";
}
Here is the problem:
On clicking on the Edit Button (image with paper and pen)
The Yellow highlighted part is supposed to be a parameter, not HTML code to be showed!
How can I solve this problem, please help?
I think the problem comes from double double-quotes.
onclick=\"cancelVolet(\""+y+"\")\">
This becomes
onclick="cancelVolet("{the value of y}")">
The onclick will just contain cancelvolet( the rest will be displayed.
Try with
onclick=\"cancelVolet(\'"+y+"\')\">
so that your browser will interpret this as
onclick="cancelVolet('{the value of y}')">
one of the solutions, is to use the encodeURI function
r.parentNode.innerHTML= "<input ... onclick=\"cancelVolet(\""+encodeURI(y)+"\")\">"
and inside the cancelVolet function, use decodeURI to get your parameter as it should be
function cancelVolet (param) {
param = decodeURI (param);
/* Your code here */
}
escape and unescape can do the same job but they are deprecated.

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();

Categories

Resources