Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Im a noob at js, and I would like to make a go bar like at the top of browsers in html and js. It will go to the url in the box when the button is pressed nothing more, nothing less. Heres about what i want:
In javascript you just have to add an event listener in the "Go" button.
Then when you click the button, you just have to redirect the url according to the text field value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="field" />
<button id="myBtn">Go</button>
<script type="text/javascript">
document.getElementById("myBtn").addEventListener("click", function(){
var url = document.getElementById("field").value;
window.location.href = url;
// OR
window.open(url);
});
</script>
</body>
</html>
With this code, if you enter a value in the text field and click the button. The url will add your value at the end.
For example if you are testing on the url localhost/ and you enter "test", javascript will redirect you to localhost/test.
To redirect correctly you must write "http://" or "https://" at the beginning
Related
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 2 years ago.
Improve this question
I have a json file which shows a number say "12925.09".
How can I show this number on my HTML page?
<html>
<title>HTML Tutorial</title>
<body>
Number =
</body>
</html>
Thanks
Here's one way. Run the script below, comments are within the code.
//Your possible (simple) json data
var numbers = {"number":10}
//Get number div by its id
var numberDiv = document.getElementById("numberDiv");
//Target number divs innerHTML and set it to the number value (10) in your numbers object
numberDiv.innerHTML = numbers.number;
<html>
<title>HTML Tutorial</title>
<body>
<div id="numberDiv"></div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want make a that auto scrolls and I want to be able to add paragraph tags to it using javascript.
Any help would be appreciated
var div = document.getElementsByTagName('div'),
p = document.createElement("p");
p.innerHTML = 'I am p Tag';
div[0].append(p);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div> I am div Tag</div>
</body>
</html>
Depending on properties of your div like Id, name, class, u can also use
document.getElementById etc.
Using jQuery plugin for javascript, you can achieve this like that:
var myDiv = $("#IdOfYourDiv");
var paragraph = document.createElement("p");
paragraph.textContent = "something";
myDiv.append(paragraph);
but next time, pelase insert your html/javascript code, nobody have a crystal ball to know how you are writing your code to help you ;)
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've been trying to get this "this" to work, to bind it to an/any HTML element that the function is applied to. I'm trying to keep it universal to make it possible to apply the same function to multiple HTML elements.
Note:
I don't want to mess with ids nor classes and such since I want to keep the function as universal as possible.
<!doctype html>
<html>
<body>
<input type="button" value="Old" onClick="Change(this);">
<script type="text/javascript">
function Change(){
this.innerHTML = "New";
};
</script>
</body>
</html>
innerHTML won't work in this case. Being that this is an input, try using value instead.
var input = document.querySelector('input');
input.addEventListener('click', Change);
function Change(){
this.value = "New";
this.removeEventListener('click', Change);
}
<input type="button" value="Old" />
The problem is that when the page hits the input the Change function is not defined. Try the following:
<!doctype html>
<html>
<body>
<script type="text/javascript">
function Change(){
this.value = "New";
};
</script>
<input type="button" value="Old" onClick="Change.call(this);">
</body>
</html>
Note that I have changed the input's onClick to Change.call(this). And that the script is loaded before the control.
You can see a working fiddle here. Note that the JavaScript settings is configured so that the script is loaded in the head (Hit the cog in the JavaScript section).
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 9 years ago.
Improve this question
I am lost, I just started programming and the code I have doesn't quite show what I'm trying to do, and is unfinished. However, my problem is I am trying to figure out how to take HTML form data entered by a user, and when a button is pressed its submits the data to a string variable in the sites Javascript. The challenge is that I can't use any server-side script, only HTML, CSS, Javascript, and I have to JQuery. I have look everywhere on how to do this for weeks. I can't find anything helpful for what I'm attempting.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script>
<!--
function storageCheck01(){
if(typeof(Storage)!=="undefined"){
activeSession();
}
else{
var b0002=document.getElementById("wrapper");
b0002.style.display="none";
document.write("No Support!");
};
}
function activeSession(){
if(typeof localStorage.visitCount !== "undefined"){
++localStorage.visitCount;
if(typeof sessionStorage.c02 !== "undefined"){
userData();
}else{
setCookie();
};
}else{
localStorage.visitCount = 1;
setCookie();
};
}
function setCookie(){
sessionStorage.c01=date();
sessionStorage.c02=screen.availWidth;
sessionStorage.c03=screen.availHeight;
userData(sessionStorage.c01, sessionStorage.c02, sessionStorage.c03);
}
function userData(date, width, hight, ){
}
addEventListener('load',storageCheck01,false);
-->
</script>
</head>
<body>
<form>
<!-- ADD FORM DATA TO RETRIEVE USERDATA -->
</form>
</body>
</html>
Well, it sounds like you are just trying to take a form and capture the user's input when they click submit. No need to post to a different file.
So, it is simply having a button putting an onclick event and then calling a function in the javascript. This javascript would use the document.getElementById(nameofObject).value.
Example:
<html>
<head>
<title>New Page 1</title>
<script language="JavaScript" type = "text/javascript">
<!--
function Test()
{
alert(document.getElementById("testinput").value);
}
//..>
-->
</script>
</head>
<body>
<form name="textfield">
<input type="text" name="T1" size="20" id="testinput">
<input type="button" value="Click Here" name="B1" onClick="Test()"></p>
</form>
</body>
</html>
Source: http://www.java2s.com/Tutorial/JavaScript/0460__DOM-Node/Getelementfromadocumentbyid.htm
If you just want to submit the data to the server, you don't have to use any JavaScript at all. When you put an "input" element in the form, for example, an "input type='text'" element, which creates a text box, the text box's value is automatically submitted to the server as a form variable, with the key being the name of the element, when use press the submit button. You can then use whatever code/platform you use on the server side to get the variable value.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want chance a Text with javascript i use the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<script type="text/javascript">
var Neu = document.getElementById("thema")[0].value;
function Aendern () {
document.all.meinAbsatz.innerHTML = Neu;
}
</script>
</head><body>
<p id="meinAbsatz">Text</p>
<input id="thema" type="text" value="Test Theme" />
chance theme
</body>
</html>
If I click on "chance theme" the "Text" chance to "undefined"
Method getElementById() returns a single element, not a set of elements. So there is no need in applying [0] to it. Also you should put the Neu initialization inside Aendern() function:
function Aendern() {
var Neu = document.getElementById("thema").value;
document.all.meinAbsatz.innerHTML = Neu;
}
DEMO: http://jsfiddle.net/RqgMb/
http://jsfiddle.net/FJr2t/
In the link above I made your code work.
Your two major problems are:
var Neu = document.getElementById("thema")[0].value;
Firstly, getElementById('thema') returns only one item, so you should drop the [0].
Secondly javascript code in your head gets executed once, when loading. So this line once gets executed at the very beginning and reads the value the input element has then.
So you should also move it into your Aendern method.
P.S.: Putting your code in window.onload etc. is not neccessary in this case, but you should definilty look at it and do it.