I was doing an exercise on positioning the image, from a book. It says, using DOM, i.e. position, top and left value of the image we can move the image along the browser window using JavaScript.
The thing is i have the image getting displayed but when i enter the coordinates it doesn't get displaced to its new value. Please if someone could tell me where i am going wrong ??
here is the HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="newjavascript.js">
</script>
</head>
<body>
<form action="">
<p>
Xcordinate : <input type="text" id="xCod" /><br/>
Ycordinate : <input type="text" id="yCOd" /><br/>
</p>
<br/>
<input type="submit" value="Set the Coordinates" onclick = "moveIt('image', document.getElementById('xCod').value,
document.getElementById('yCod').value )" />
</form>
<div id="image" style="position: absolute; left:0; top:200px" >
<img src="testing.jpg" alt="Picture Cannot be displayed" />
</div>
</body>
</html>
and the JavaScript file
function moveIt (movee, newTop, newLeft){
dom = document.getElementById(movee).style;
dom.top=newTop+"px";
dom.left=newLeft+"px";
}
I have default browser for Google Chrome
Because it's a type="submit" button, it is posting back and you're seeing the same page over again, you need to return false; to prevent the submit, like this:
<input type="submit" value="Set the Coordinates" onclick = "moveIt('image', document.getElementById('xCod').value,
document.getElementById('yCod').value); return false;" />
Also noticed in setting up the demo that your element IDs are off, this:
Ycordinate : <input type="text" id="yCOd" /><br/>
Should be:
Ycordinate : <input type="text" id="yCod" /><br/>
You can test it out (with both of the above fixes) here.
You have a capitalization issue (or a typo in your post). You have an element in your page with an id of yCOd, but your code is looking for an ID of yCod
Related
I keep running into mysterious issues when testing my sample MTurk task in the sandbox environment. In the requester environment, I create a task by copy/pasting HTML/JS code into the "Source" text box under Create > Edit Project > (2) Design Layout.
I'm able to preview the task on that page, and it appears to work correctly. I can also publish the HIT in the RequesterSandbox, which lands me on this page: RequesterSandbox > Manage > Results
I can also log into the WorkerSandbox, find my HIT, and complete it. However, when I press submit, I'm redirected to a page that says "Loading next HIT...," and then to another page, which says "Sorry, we couldn't find that page.
Strange...the page you were looking for is not here. Let's go home and try again"
Going BACK to the RequesterSandbox, there is no evidence that the HIT was submitted at all, and I can't find the HIT results. I suspect that it isn't being submitted properly in the WorkerSandbox, but I'm not sure how to fix it. Any advice would be greatly appreciated!!
Here is the HTML/javascript code for my sample task:
// extract url parameters
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {
queryDict[item.split("=")[0]] = item.split("=")[1]
})
// use extracted url parameters to populate form
$("#endForm").attr("action",queryDict["host"]);
$("#assignmentID").val(queryDict["assignmentId"]);
$("workerId").val(queryDict["workerId"]);
$("#hitId").val(queryDict["hitId"]);
// reveal submit button after radio button is selected
$('#question_buttons').change(function(){
var btnResponse = $("input[name='theseButtons']:checked").val();
if (btnResponse == "thisOne" || btnResponse == "thatOne") {
$("#endTask").removeClass("hidden");
}
})
// submit response
$("submitButton").click(function() {
$("#endForm").submit();
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>MTurk HIT Test</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="endForm" method="post" name="endForm">
<input id="data" name="data" type="hidden" value="" />
<input id="assignmentId" name="assignmentId" type="hidden" value="{{ assignment_id }}" />
<input id="workerId" name="workerId" type="hidden" value="{{ workerId }}" />
<input id="hitId" name="hitId" type="hidden" value="{{ hitId }}" />
<div class="container">
<h3>Write something:</h3>
<br />
<textarea cols="50" name="answer" rows="2"></textarea>
</div>
<div class="container" id="question_text">
<h3>Select one of these options:</h3>
</div>
<div class="container" id="question_buttons">
<div class="radio-inline">
<label><input name="theseButtons" type="radio" value="thisOne" />this one</label>
</div>
<div class="radio-inline"><label>
<input name="theseButtons" type="radio" value="thatOne" />that one</label>
</div>
</div>
<div class="container hidden" id="endTask">
<h3>Submit form by clicking the button below:</h3>
<br />
<input id="submitButton" name="submitButton" type="submit" />
</div>
</form>
The results created on sandbox worker UI would not show on the sandbox requester page.
You can also see the answer through this URL:
MTurk HITs created Through Java API are not showing on Manage Tab on UI
There is a console tool to manage the Mturk HIT on sandbox.
Don't know how this is supposed to work, but here goes. So the issue that I am seeing at the moment is I am unable to get a value from a getElementById when the element exists before the script to run. I have been unable to find anything via google or stack overflow. If I am barking in the wrong area, truly I apologize. Below is the offending code. I think?!? Again please forgive.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type='text/javascript' src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<title>Testing Masking</title>
</head>
<body>
<input name='EmailAddress' type='text' maxlength='255' />
<input name='maskTest' />
<button id='maskButton'>Test
</button>
<script>
document.getElementById('maskButton').onclick = function() {
var test = document.getElementById('maskTest').value;
console.log(test);
}
</script>
</body>
</html>
As I said I am unable to get any value other than null back to the console. Thanks if you guys can help.
You don't have an element with an id of maskTest. Presumably you're just missing the attribute from the name="maskTest" element.
Also note that using onclick is considered outdated now. It's much better practice to use addEventListener instead. Try this:
document.getElementById('maskButton').addEventListener('click', function() {
var test = document.getElementById('maskTest').value;
console.log(test);
});
<input name="EmailAddress" type="text" maxlength="255" />
<input id="maskTest" name="maskTest" />
<button id="maskButton">Test</button>
Or alternatively you could use jQuery as you've added it to your page anyway:
$('#maskButton').on('click', function() {
var test = $('#maskTest').val();
console.log(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="EmailAddress" type="text" maxlength="255" />
<input id="maskTest" name="maskTest" />
<button id="maskButton">Test</button>
So I have been getting help from some as to how I could fix the issue about how I want to be able to click a button, and have it instead auto select the search box on my site.
Well, people are telling me to use Javascript for the click to do it and I was told to use this code:
function setFocus() {
document.getElementById("myTextbox").focus();
}
But I don't know how to properly combine it with my html. Looked around on Google and everything isn't piecing together for me..
My HTML:
<html>
<head>
<title>DLL Download Database</title>
<meta name="description" content="Need a .DLL file? Don't worry, I am sure we have a DLL available for you!">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function setFocus() { document.getElementById("search").focus(); }
</script>
</head>
<body>
<div class="my_container cf">
<div class="headerbuttons"><p>HOME</p></div>
<div class="headerbuttons"><p>HOW TO INSTALL</p></div>
<div class="headerbuttons"><p style="text-decoration: none; color:#000000;padding:3px;display:block;" onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>
<div class="headerbuttons"><p>DLL SOFTWARE FIXER</p></div>
</div>
<h2 class="homepage-start"><strong>WELCOME TO DLL DOWNLOAD.US!</strong></h2>
<div class="body-main2">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search for a DLL" />
</form>
</div>
</body>
</html>
Please make the following changes in your html
HTML
<div class="body-main2">
<form method="get" action="/search" id="search">
<input id="searchbox" name="q" type="text" size="40" placeholder="Search for a DLL"/>
</form>
</div>
<div class="headerbuttons">
<a style="text-decoration: none;
color:#000000;padding:3px;display:block;" onclick="setFocus();">
<p>CAN 'T FIND A FILE?</p>
</a>
</div>
JavaScript
<script type="text/javascript">
function setFocus() {
document.getElementById("searchbox").focus();
}</script>
Its working fine !!! See this working JSFIDDLE Demo
try
onClick="javascript:setFocus();" // no parameter
or more simply
onClick="setFocus();" // no parameter
BTW, you should be setting the focus on the input tag not the form, so change the id of the input tag to be id="search" and of course remove it from the form.
onClick="setFocus(search);
remove "search" inside the braces
set id="search" for text field
Working Demo
You were not calling the function setFocus(). Also, there was no ID assigned to the textbox.
HTML:
<input name="q" id="search_box" type="text" size="40" placeholder="Search for a DLL" />
Javascript:
document.getElementById("search_box").focus();
instead of calling setFocus(search)
have you tried calling only setFocus()
in
`<div class="headerbuttons"><p style="text-decoration: none;color:#000000;padding:3px;display:block;"
onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>`
EDIT:
remove id = search from the form element and set it on the text element
<form method="get" action="/search" >
<input name="q" type="text" size="40" placeholder="Search for a DLL" id="search" />
</form>
so I have a project now, as an addition to my company's website, we want to show our clients how much they can save on gas by buying one of our electric cars, I'm responsible for making it happen, I don't know how to approach this using javascript, can you guys give me a hand? our marketing guy got the idea from this website, that is basically what we want, but I was hoping i could make it a little better on some aspects:
1st-the client wouldn't have to press submit to see the results, as they fill the last field, the calculated part is populated automatically, for this i've been fiddling with the onChange event, unsuccessfully though xD
here's what I have so far, it is not working, at least on dreamweaver's live mode, haven't tested it online yet as I was hoping to develop the whole thing offline:
<script type="text/javascript">
function calc(){
var km=document.getElementById(km).value;
var euro=document.getElementById(euro).value;
var consumo=document.getElementById(consumo).value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
return fossil_day;
}
</script>
<form name="calc" id="calc" >
<p>
Km/dia
<input type="text" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="text" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="text" onChange="calc()" name="consumo" id="consumo" value="" />
</p>
<input type="button" onClick="calc()" name="submit" id="submit" value="Calcular" />
<script type="text/javascript">
var fossil_day = calc();
document.write('<p>'+fossil_day+'</p>');
</script>
</form>
Please note that although I have this already, I wouldnt mind not doing this at all and using another solution, even if it doesnt use forms, I'm just showing what i have already so you can tell me how I'm wrong and how I can have a better approach at it
there are many errors inside your code
document.getElementById() needs the element id in brackets ''
you can't create a element with the same name,id as a function calc else it will throw an error as it's an object and not a function.
your executing the function onload... but you want it to be executed when the button is clicked & onchange.
you don't need to add value if empty and name if you use getElementById
return false in the function on buttons inside form else it could send the form and so refresh the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<script>
function calc(){
var km=document.getElementById('km').value;
var euro=document.getElementById('euro').value;
var consumo=document.getElementById('consumo').value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
document.getElementById('result').innerHTML=fossil_day;
return false
}
</script>
</head>
<body>
<form>
<p>Km/dia<input type="text" id="km"/></p>
<p>€/Litro<input type="text" id="euro" /></p>
<p>Litros/100km<input type="text" onChange="calc()" id="consumo" /></p>
<input type="button" onClick="calc()" value="Calcular" />
</form>
<div id="result"></div>
</body>
</html>
Useing jQuery (and html5 type="number" form fields):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<p>
Km/dia
<input type="number" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="number" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="number" name="consumo" id="consumo" value="" />
</p>
<div id="fossil-day"></div>
</form>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function calculate(){
var km = $('#km').val();
var euro = $('#euro').val();
var consumo = $('#consumo').val();
var cem_km = consumo*euro;
var fossil_day = (cem_km*km)/100;
$('#fossil-day').html(fossil_day);
}
$(function() {
/*when #consumo input loses focus, as per original question*/
$('#consumo').blur(function(){
calculate();
});
});
</script>
</body>
</html>
Im a bit of a newbie.
Im trying to post some data I have in a JavaScript variable to my server.
Iv looked around and from what I gather I need to put it in as part of a form? is there anyway to hide this form box?
Do I place this information in the value section of the form?
Eg.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Namespace</title>
<script type="text/javascript" charset="utf-8">
functionAddPostData(){
var name = "Christopher";
var last = "Bar";
var formInfo = document.forms['info'];
name = formInfo.elements["first"].innerHTML;
last = formInfo.elements["surname"].innerHTML;
}</script>
</head>
<body>
<form action="script.php" method="post" allign="bottom">
<label for="info">
<input type="text" name="first" value="" size ="40" />
<input type="text" name="surname" value="" size ="60" />
<input type= "submit" name="submitted" value="info" allign="middle"/>
</form>
</body>
</html>
This is my best guess? Am I heading in the right direction? Is there a way to hide the form boxes?
Use hidden fields to post the data to server if you dont want to show the textbox in the UI.
<input type="hidden" name="first" value="" size ="40" />
You should set the onSubmit of form to functionAddPostData which will get called when you submit the form. Also the form should have a name atttibute since you are trying to access it by name.
The form element values should be set as below
var formInfo = document.forms['info'];
formInfo.first.value = name;
formInfo.surname.value = last;
There are a couple things wrong with the code you posted, which is why its not working. It's late so instead of a line by line analysis I will post a modified version that you can look over. I would recommend reading through an HTML guiide like W3 Schools and to also go through a good javascript tutorial (like Webmonkey. Cheers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Namespace</title>
<script type="text/javascript" charset="utf-8">
function AddPostData(){
var name = "Christopher";
var last = "Bar";
var formInfo = document.forms['info'];
name = formInfo.elements["first"].value;
last = formInfo.elements["surname"].value;
alert(name + ' ' + last);
}</script>
</head>
<body>
<form id="info" action="script.php" method="post" align="bottom">
<p>For</p>
<input type="text" name="first" value="" size ="40" />
<input type="text" name="surname" value="" size ="60" />
<input type= "submit" name="submitted" value="info" align="middle" onclick="AddPostData();"/>
</form>
</body>
</html>