I am attempting to add a textfield called Initials and based on what user enters in say fName textfield onkeyup auto complete initials textfield using first character only.
Here's my pathetic attempt, need help
<!DOCTYPE html>
<html>
<body>
<p> </p>
<p>Enter your name:
<input name="fName" type="text" id="fname" onkeyup="showFirstChar()">
</p>
<p>Initials:
<input name="Initials" type="text" id="Initials">
<script>
function showFirstChar() {
var sWord = document.getElementById('fName').innerHTML;
document.getElementById('Initials').innerHTML = sWord.charAt(0);
}
</script>
</p>
</body>
</html>
try this
var sWord = document.getElementById('fName').value;
document.getElementById('Initials').value= sWord.charAt(0);
Input has .value property instead of .textContent
Related
I'm trying to get an input from a text input box to transform a paragraph into what's in the input box. Note that this is not a web page just code run in a Browser.
Here's what I've got so far:
<!DOCTYPE html>
<html>
<form><center>
First name:<br>
<input type="text" name="Firstname" id="JohnnyFunc"></form>
<button type="button" onclick="myFunction">Submit</button>
<script>
function myFunction()
{
document.getElementById("JhonnyOutput"). innerHTML="JohnnyFunc"
}
</script>
<center><p>Hello</p><p id="JhonnyOutput">Johhny!</p></center>
</html>
The onclick attribute should include the parentheses after the function name: onclick="myFunction()"
<form>
<center>First name:<br><input type="text" name="Firstname" id="JohnnyFunc"></center>
</form>
<center><button type="button" onclick="myFunction()">Submit</button></center>
<script>
function myFunction()
{
document.getElementById("JhonnyOutput"). innerHTML="JohnnyFunc"
}
</script>
<center><p>Hello</p><p id="JhonnyOutput">Johhny!</p></center>
You were also missing a closing tag for your first <center> element
Also, to change the text to what's in the text box, you need to get the text from the input element:
function myFunction() {
var newText = document.getElementById("JohnnyFunc").value
document.getElementById("JhonnyOutput").innerHTML = newText
}
I'm trying to add and delete array strings using jQuery in Typescript.
The program adds a person which includes a delete button but it doesn't display both surname and othername input values, only one and the first time I press the Insert button, it doesn't display any values until I press the button again.
How do I allow the user to enter in input values then display both surname and othername when I press the "Insert" button?
How do I also implement a simple prompt message when deleting a person?
Error messages when compiling with tsc:
Person.ts: error TS2339: Property 'reset' does not exist on type 'HTMLElement'.
Desired output example:
Person 1 (values entered above, first press of button)
Surname: Smith (del-btn)
Othername: Matt (del-btn)
Person 2: (values in inputs reset, new values entered)
Surname: Williams (del-btn)
Othername: Robert (del-btn)
I'm using jQuery but I would be more than happy to receive a Typescript alternative.
Here is my code so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="src/Person.js"></script>
<script type="text/javascript" src="src/jquery-3.2.1.js"></script>
</head>
<body>
<form id="form1" name="form1">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" /><br />
<label for="othername">Other Name</label>
<input type="text" name="othername" id="othername" /><br />
<input onclick="newFunction()" id="Button-insert" type="button" value="Insert" />
<p id="demo"></p>
<input type="button" id="Button-reset" value="Reset">
</form>
</body>
</html>
Typescript/ jQuery:
function newFunction() {
var all_values =[], demo = $("#demo"), form = $("#form1")[0], surname = $("#surname"), othername = $("#othername");
$('#Button-insert').click(function(){
var temp_val = surname.val();
var temp_va12 = othername.val();
all_values.push(temp_val);
all_values.push(temp_val2);
// create delete button along with the value
demo.append(
'<p>'+temp_val+' <button value="'+temp_val+'" type="button" class="del-btn">Delete</button></p>',
'<p>'+temp_val2+' <button value="'+temp_val2+'" type="button" class="del-btn">Delete</button></p>',
);
form1.reset();
});
$('#Button-reset').click(function(){
all_values = [];
demo.html('');
});
demo.on('click', '.del-btn', function(){
all_values.splice(all_values.indexOf($(this).val()), 1);
$(this).parent().remove();
});
}
create two text boxes.User will give from keyboard in the first text box and in the second text box will take the variable from the first text box and will make the characters caps locks.Example :i give e inside the first text box on the second box will be E.
<html>
<head>
<title>exc1</title>
<script>
function create() {
var x = document.getElementById("textbox").value;
}
function takevariable(x){
}
</script>
</head>
<body>
<input type="text" id="textbox" onkeydown="create()">
<input type="text" id="textbox" onkeypress="takevariable()">
</body>
</html>
Here you are giving same id to the both text element, ids should be unique so I am renaming them with textboxfrom and textboxto. Second, here you should also need to listen keyup event aswell, otherwise you wont't get last character in the second box. Because for single character entry, browser enters character just when it fires keyup event.
<html>
<head>
<title>exc1</title>
<script>
function create() {
var x = document.getElementById("textboxfrom").value;
}
function takevariable(x){
document.getElementById("textboxto").value = document.getElementById("textboxfrom").value.toUpperCase();
}
</script>
</head>
<body>
<input type="text" id="textboxfrom" onkeydown="create()" onkeypress="takevariable()" onkeyup="takevariable()">
<input type="text" id="textboxto" >
</body>
</html>
Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>
I want when a user enter number in the textbox and click set, textboxes appear based on the number he entered and this what I come up with but it is not working please help
<html>
<head>
<script>
function generate(){
var a=parseInt(document.getElementById("nochapter").value);
for (i=0;i<=a,i++){
document.getElementById("ch").innerHTML="<input type='text' >"}}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included <input type="text" id="nochapter" >
<input type ="button" value="set" onclick="generate()">
<div id="ch"></div>
Your code should be like this.
Is better append an input element to the div.
<head>
<script>
function generate() {
var a = parseInt(document.getElementById("nochapter").value);
var ch = document.getElementById("ch");
for (i = 0; i < a; i++) {
var input = document.createElement("input");
ch.appendChild(input);
}
}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included
<input type="text" id="nochapter" />
<input type="button" value="set" onclick="generate()" />
<div id="ch"></div>
</form>
</body>
There is small glitch in your written code
for (i=0;i<=a,i++) --> for (i=0;i<=a;i++)
even if you change that it will generate only one text box because you are replacing innerHTML for every iteration. so prepare the string separately based on no of iteration and assign it to innerrHTML. it should work.