I try to make a simple javascript fonction which will allow me to click on a button, then a text is duplicated into a field.
For example:
On my HTML page (or PHP), I have a blank field, a text and a button, like:
THE FIELDHello everybody THE BUTTON
When I click on the button, the text "Hello everybody" appears in the field.
Thank you very much if you have a simple code example.
Sim100
You want to use .value. Here you go:
<input type="text" name="foo" id="foo">
<input type="button" onclick="document.getElementById('foo').value = 'Hello everybody'">
<input type="text" id="mytextinput">
<br>Hey Guys <button onclick="document.getElementById('mytextinput').value='Hey Guys, thanks for clicking the button';">Click Me</button>
Try it: http://jsfiddle.net/sUYEk/
What I get from the question is that you want to place the text that comes before the button into the text field. To improve earlier answers, this can be done with the .innerText function.
<html>
<head>
<script type="text/javascript">
function moveTextIntoInput(){
var text = document.getElementById('text').innerText;
document.getElementById('text-input').value = text;
}
</script>
</head>
<body>
<input type="text" id="text-input"><br/>
<span id="text">Hi everyone!</span><button onclick="moveTextIntoInput()">Click Me</button>
</body>
</html>
Related
I am new to JavaScript and I need some help with my project!
I am trying to create a form for a company website that allows visitors to email the company directly. When the user clicks the input type=text field to write in their name, I want the background to change color to indicate that they are in that field. Right now I have something like this:
<input class="field" type="text" id = "input" onclick="changeMe()" name="name" placeholder="Name" required autofocus/>
<script>
function changeMe() {
document.getElementById("input").style.backgroundColor = "blue";
}
</script>
I know it is easier to do in jquery but unfortunately my teacher only wants us to use javascript right now and mine doesn't seem to be working. I want the background to change colour as soon as the user clicks the input field even before they start typing.
Does anyone know how to do this?
Thank you!!!!!
heres a sample code
more help you can find on
Demo: http://jsfiddle.net/jG95a/
<html>
<head>
<title>
This is a title
</title>
<script type="text/javascript">
function changeColor()
{
alert("bla")
document.getElementById("text1").style("backgroundColor":"red");
}
</script>
</head>
<body>
<form>
<input id="text1" type="text" onkeypress="changeColor()">
</form>
</body>
</html>
Folks,
I am newbie to coding, obviously, so having completed few Lynda courses recently on HTML and Javascript, I have hit a wall with my simple HTML page. Basically, what I want is to do a basic calculation with JavaScript to have the user enter the two numbers using HTML form/ input elements and do a basic arithmetic calculation on JS. For some reason the code is not working. Can somebody point me to the right direction as why those input values are not being read by JS? Is getElementById the correct way?
Also, I am using the console.log to dislpay the results as I don't know yet how to have it displayed on the HTML page as a text below the submit button.
The HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Accurate Mass Error Calculator</title>
</head>
<body>
<h1> Accurate Mass Error Calculator </h1>
<p> Please enter the values below for each field:</p>
<form onsubmit="return calculateError()" method="post">
<p> Exact Theoretical Mass: <input id="exactMass" type="number" step="any" name="exactMass"/></p>
<p> Accurate Experimental Mass: <input id="accurateMass" type="number" step="any" name="accurateMass"/></p>
<p> <input id="submitButton" type="submit" name="submit1" value="Calculate" onclick="return calculateError()" /></p>
</form>
<script type="text/javascript" src="ppmError.js"></script>
</body>
</html>
The JS code(ppmError.js):
function calculateError () {
var exactMass=document.getElementById("exactMass");
var accurateMass=document.getElementById("accurateMass");
var ppmError=(accurateMass.value-exactMass.value)/exactMass.value*1000000;
if (isNaN (ppmError) ) {
console.log ("Not a valid Entry! Please try again.")
} else {
console.log(ppmError);
}
}
As Satpal said in the comment you should indeed cast your text to an int with :
var exactMass = parseInt(document.getElementById("exactMass").value);
var accurateMass = parseInt(document.getElementById("accurateMass").value);
var ppmError=(accurateMass-exactMass)/exactMass*1000000;
For your other question, in your html add an empty paragraph where you want to display your result
<p id="result"></p>
And instead of calling console.log you can do :
document.getElementById('result').innerHTML = ppmError;
Use solution from singe31, but to prevent reloading of the page after click change type of your button from "submit" to "button" or place "return false;" as the last line of calculateError() function. Otherwise you won't see any change on the page.
I am sure I am missing some basic part here, but have a look at my very simple code:
<html>
<head>
<script>
function showscore(){
var score = document.createTextNode("test");
var placeholder = document.getElementById("field");
placeholder.value = score.nodeValue;
}
</script>
</head>
<body>
<form>
<input type="text" id="field"/>
<input type="submit" value="Show score" onclick="javascript:showscore()" />
</form>
</body>
</html>
When I run it, the result (for the moment, the word "test") appears inside the input field for a very brief moment and then goes away.
What extremely simple and easy thing I am missing? :-)
Thanks very much.
That's because the page is submitting the form. Just change type="submit" to type="button" or prevent the form from submitting.
It's because your button is an <input type="submit /> so after your Javascript is executed, the browser submits the form.
If you don't want the form to submit, you could use an <input type="button" /> instead.
Alternatively you could leave it as a submit and return false; after the showscore() call. That will prevent the form from submitting.
I am trying to format a selected text to bold inside a textbox but not happening. However, it is hapenning in a span/div. My code
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function FormatSelectedWord(txtBox,style)
{
var selectedText = document.selection
? document.selection.createRange().text
: txtBox.value.substring(txtBox.selectionStart,txtBox.selectionEnd);
if(selectedText!='')
{
var newText='<'+style+'>'+selectedText+'</'+style+'>';
txtBox.value=txtBox.value.replace(selectedText,newText)
spOutput.innerHTML=txtBox.value;
}
}
</script>
</head>
<body>
<input type="text" name="txtBox"> </input>
<input type="button" value="Bold" onclick="FormatSelectedWord(txtBox,'b')">
<span id="spOutput"></span>
</body>
</html>
Is it possible to do it insde a textbox. If so how?
Thanks
No, it's not possible to style the text in a text box. You can make your div or span contentEditable=true if you need formatted text that is editable.
Rather than re-invent the wheel, you're better off looking at implementing TinyMCE or some other, similar thing that does this - it's quite easy. It's very commonly sought after functionality, and it's called a "Rich text editor", for if you want to go Googling :)
Trying to add this kind of functionality yourself is a huge can of worms, and you really don't want to get involved :)
Here is an example of what I think you want: http://jsfiddle.net/6gQJC/1/
and here's what you asked: http://jsfiddle.net/6gQJC/
txtBox is undefined
So this:
<input type="text" name="txtBox"> </input>
needs to be
<input type="text" id="txtBox" name="txtBox"> </input>
and then
function FormatSelectedWord(txtBox,style)
{
var textbox = document.getElementById('textBox');
I have the following page. I want to restore the input text if it has not been changed (when the focus is lost). How can I do this?
<html>
<head>
</head>
<body>
<script type="text/javascript">
function clearTextArea(object){
object.value = "";
}
</script>
<input type="text" id="option" value="test" onfocus="clearTextArea(this);"></input>
</body>
</html>
Is there anything against using an
<input (...) onblur="this.value = 'test'">
listener?
(You can also do the same thing using a "placeholder" attribute if youre working with HTML5)
At your clearTextArea method take the current text in the text area and store in into a hidden field or a cookie. Then at on blur event, check if the value changed.