Change a Text with Javascript [closed] - javascript

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.

Related

How to add <p> tags using javascript to a <div>? [closed]

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

Binding .this to an HTML element [closed]

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).

How to run a JavaScript function on an input field when a button is pressed [duplicate]

This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 6 years ago.
I'm trying to remember how to associate HTML and JS through different actions, so I just wrote a simple reverse script (any number would be turned into a string and reversed)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Number Reverser</h1>
<script>
function Reverser(n){
n = n + "";
return n.split("").reverse().join("");
}
function ExecuteRev(){
console.log(Reverser());
}
</script>
<input id="bubu">
<button onclick="ExecuteRev()">REVERSE 'EM</button>
</body>
</html>
The ridiculous part is that the console returned
denifednu
My genius JS level managed to reverse the error itself.
How I can connect the input to the function to be executed on the button press and displayed in a div (any div, not console)?
I'm not entirely sure what you mean but I think you might be talking about using the DOM. For instance, to update a div with id="x", do the following.
document.getElementById("x").innerHTML = "New content";

How to make a Go url bar in html+css [closed]

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

Blocking redirection with JQuery - What am I doing wrong? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I am trying to do some Ajax and jQuery here, submitting a form while staying on the same page. I read the following topic to start what I wanted to do (which is consisting of several good examples) : jQuery AJAX submit form
Here is my HTML file :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery File Tree Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="addTag.js" type="text/javascript"></script>
</head>
<body>
<form id="form_addtag" method="post" name="form_addtag" action="add_tag.php">
<legend>Add a tag</legend>
<input type="text" name="tag_name" id="tag_name" class="text" size="30" placeholder="Tag Name" />
<input type="text" name="tag_text_color" id="tag_text_color" class="text" size="6" placeholder="#ffffff"/>
<input type="text" name="tag_bg_color" id="tag_bg_color" class="text" size="6" placeholder="#000000" />
<button type="submit" id="button_save_tag">Add</button>
</form>
</body>
</html>
And the JS file :
$("form_addtag").submit(function(e) {
e.preventDefault();
var url = "add_tag.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("form_addtag").serialize(), // serializes the form's elements.
});
});
The execution is perfect : I can fill the form, click on the Submit button and it will pass everything field to add_tag.php. However, I always end up on mydomain.com/add_tag.php while I wanted to stay on the first page.
Your selector is incorrect:
$("#form_addtag").submit(function(e) {
You need the leading # to indicate that you want to search for an element by its "id". Without that, you were telling jQuery to add an event handler to every <form_addtag> element it could find, which is of course an empty list.
It's sort-of a big stumbling block with jQuery that the library doesn't treat such situations as errors. It can't really, because that would make life even more difficult, but it's still something that causes everybody some pain now and then.
In this case, you could remove the "action" attribute from the form, though that'd mean the page wouldn't work at all without JavaScript.
There are two problems.
Your jQuery needs to either be executed after the element it refers to on the page exists, usually by placing the code before the closing body tag, or it should be wrapped in a document ready call in the head of the page by using:
$( document ).ready(function() {
// your code here;} );
You're missing a # on your form selector. It should be: $("#form_addtag")

Categories

Resources