I just started to learn Javascript. I have two questions regarding TextCounter & Trigger innerHTML.
My code below, how to separately trigger innerHTML for two inputs?
Why the alert info which is "over!!" still shows while deleting the number of words in the textarea?
Can someone please help? Much appreciated!
HTML
<html>
<head>
</head>
<body>
<form>
<textarea name="line01" rows="3" style="width:340px;"
onKeyUp="textCounter(this.form.01,this.form.countDisplay01,10);"
onKeyDown="textCounter(this.form.01,this.form.countDisplay01,10);">
</textarea>
<br>
<input readonly type="text" name="countDisplay01" width: 25px"
value="10">characters remaining
<p id="go1"></p>
</form>
<form>
<textarea name="line02" rows="3" style="width:340px;"
onKeyUp="textCounter(this.form.02,this.form.countDisplay02,8);"
onKeyDown="textCounter(this.form.02,this.form.countDisplay02,8);">
</textarea>
<br>
<input readonly type="text" name="countDisplay02" width: 25px"
value="8">characters remaining
<p id="go2"></p>
</form>
</body>
</html>
Javascript
<script>
function textCounter(textField, showCountField, maxAmount) {
if (textField.value.length <= maxAmount) {
showCountField.value = maxAmount - textField.value.length;
} else {
document.getElementById("go1").innerHTML = "<span
style='color:red'>Over!!</span>";
document.getElementById("go2").innerHTML = "<span
style='color:red'>Over!!</span>";
textField.value = textField.value.substring(0,maxAmount);
}
</script>
Try with the following code
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Counter</title>
</head>
<body>
<form>
<textarea name="01" rows="3" style="width:340px;"
onKeyUp="textCounter(this.form['01'],this.form.countDisplay01,10,1);"
onKeyDown="textCounter(this.form['01'],this.form.countDisplay01,10,1);">
</textarea>
<br>
<input readonly type="text" name="countDisplay01" style="width: 25px;" value="28"> characters remaining
<p id="go1"></p>
</form>
<form>
<textarea name="02" rows="3" style="width:340px;"
onKeyUp="textCounter(this.form['02'],this.form.countDisplay02,8,2);"
onKeyDown="textCounter(this.form['02'],this.form.countDisplay02,8,2);">
</textarea>
<br>
<input readonly type="text" name="countDisplay02" style="width: 25px" value="15">characters remaining
<p id="go2"></p>
</form>
</body>
</html>
SCRIPT
<script>
function textCounter(textField, showCountField, maxAmount,id) {
if (textField.value.length <= maxAmount) {
showCountField.value = maxAmount - textField.value.length;
document.getElementById('go'+id).innerHTML = '';
} else {
document.getElementById('go'+id).innerHTML = '<span style="color:red">Over!!</span>';
textField.value = textField.value.substring(0,maxAmount);
}
}
</script>
As you have used a name that starts with number, it's not a valid variable. You should access it through dictionary lookup:
textCounter(this.form['01'],this.form.countDisplay01,10);
For the alert text, you should reset the innerHTML in the first if clause:
if (textField.value.length <= maxAmount) {
showCountField.value = maxAmount - textField.value.length;
document.getElementById("go1").innerHTML = "";
document.getElementById("go2").innerHTML = "";
} else {
document.getElementById("go1").innerHTML = "<span style='color:red'>Over!!</span>";
document.getElementById("go2").innerHTML = "<span style='color:red'>Over!!</span>";
textField.value = textField.value.substring(0,maxAmount);
}
This will remove the alert text, on the next keypress. If you want to remove the text immediately, you have two options:
Forget about showing an error.
Show the error for about a fraction of second and then remove it. Using something like a setTimeout. But you should remember, the window won't redraw before returning from your function. So, setting the alert text first, and then removing it at the end of your function, will be the same as doing option 1.
Related
I am trying to update 1 textarea (output) with different text based on which text box is updated. However for some reason the only text that will populate the output text box is the first if statement. The ID's will alert as expected. I have this testing on a static document which doesnt alert at all in my fiddle, but that can be found here: https://jsfiddle.net/h6w4s50L/ all of the code is the same so I'm not sure why fiddle doesn't like it.
Original code is below:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function update(id) {
alert(id)
if (id = 1){
document.getElementById('output').value += "{panel:title=Updates}\n\n" + id.value + "\n\n{panel} \n\n";
} else if (id = 2) {
document.getElementById('output').value += "{panel:title=Attached}\n\n" + id.value + "\n\n{panel} \n\n";
} else if (id = 3) {
document.getElementById('output').value += "{panel:title=Admin Updated}\n\n" + id.value + "\n\n{panel} \n\n";
} else if (id = 4) {
document.getElementById('output').value += "{panel:title=Contact Updated}\n\n" + id.value + "\n\n{panel} \n\n";
}
}
</script>
<form>
<fieldset>
<legend>Domain Update Information</legend>
<br/>POC Updates: <br/>
<textarea id="1" rows="7" cols="50" onchange="update(this.id)"></textarea><br/><br/>
Authorization Letter Attached: <br/>
<textarea id="2" rows="7" cols="50" onchange="update(this.id)"></textarea><br/><br/>
Authorizing Authority Updated: <br/>
<textarea id="3" rows="7" cols="50" onchange="update(this.id)"></textarea><br/><br/>
Security Point of Contact Update: <br/>
<textarea id="4" rows="7" cols="50" onchange="update(this.id)"></textarea><br/>
</fieldset>
</form>
<textarea id="output" rows="20" cols="150">Domain Update Information:
</textarea>
</body>
</html>
This is just a test to make sure I can get my end goal working, but it seems the issue is with the if / else if section of my script. Any assistance would be appreciated.
Your mistake is in thinking of use id.value.
The id contains just a string not an object. Replace id.value by document.getElementById(id).value.
Okay so I've built this array but I would like it so when they type their post code into the "post code" text box that it reads the array and if their post code is within the array it adds 2 to the amount/ "total" text box.... how would I go about this as I've been stuck for about 2 weeks now....? Any help is appreciated! thank you!
<!DOCTYPE html>
<html>
<body>
<b>Post Code</b><input type="text" myfunction()">
<p>
<b>Total: £ </b><input name="amount" size=8 value="0">
</p>
<p id="demo"></p>
<script>
function myFunction() {
var postcode = ["ZE", "KW","IV","HS","AB","DD","PH","PA","FK","KY","G","BT","IM,"GY","JE","EH","ML","KA"];
var a = postcode.indexOf("CV","LE");
document.getElementById("value").innerHTML = a;
}
</script>
</body>
</html>
There are a few typos in the above code. I have assumed that first two letters of the pincode are mentioned in the array. Following is the code that I have come up with. Hope it helps..
<!DOCTYPE html>
<html>
<body>
<b>Post Code</b><input name="postcode" type="text" onblur="myFunction(this.value);">
<p>
<b>Total: £ </b><input id="amount" name="amount" size=8 value="0">
</p>
<p id="demo"></p>
<script>
function myFunction(pc) {
var postcode_arr = ["ZE", "KW","IV","HS","AB","DD","PH","PA","FK","KY","G","BT","IM","GY","JE","EH","ML","KA"];
var firsttwo = pc.substr(0,2);
firsttwo = firsttwo.toUpperCase();
//alert(firsttwo);
var a = postcode_arr.indexOf(firsttwo);
if(a!= -1) {
var amt = parseFloat(document.getElementById("amount").value);
amt +=2;
document.getElementById("amount").value = amt;
}
document.getElementById("demo").innerHTML = a;
}
</script>
</body>
</html>
So I have this code and it does not seem to work. The thing I want it to do is to call the "together" from the function "go" in the function "second". What am i doing wrong?
The program was initially supposed to take what is in the input-text and add it with the ".com" or the ".no"(depending on what u checked) and redirect to that page. But I only want to call the "together" in the "second" function. Is there any better way to do it?
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<link rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for="no">.no</label><br />
<input type="radio" id="com" name="end" value=".com">
<label for="com">.com</label>
</div>
</fieldset>
<script type="text/javascript">
var end = "";
var input = document.getElementById("input").value;
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
}
second(together);
function second(together){
alert(together);
}
</script>
</body>
</html>
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
} // remove this
second(together);
} // add this
Well so far i havent been able to get it to change the input box value.
What i want it to do?
I want it to take the text from the first box. And when you click the button splits it and appends them to the 2nd and 3rd box.
I don't want to use jquery or any libraries purely javascript.
Any questions ask away.
Not sure what im doing wrong here. Seems it should work. Any help? Thanks
Edited this is working for what i need.... not sure if its the best way but it does work
Code
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var urls_1;
var split_text;
function addto_boxes(form) {
var split_text = document.getElementById("text_to_split").value;
var urls_1 = split_text.split(" ", 100000);
document.getElementById("input_box1").value = document.getElementById("input_box1").value + urls_1[0] + " ";
document.getElementById("input_box2").value = document.getElementById("input_box2").value + urls_1[1] + " ";
}
</SCRIPT>
</HEAD>
<BODY>
<input id="Split" type="button" value="Add to boxes" onclick="addto_boxes(this.form);"/><Br>
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea><Br>
<FORM NAME="myform" ACTION="" METHOD="GET">Put 1st urls in this box:
<textarea NAME="inputbox" id="input_box1" VALUE=""rows="4" cols="75"></textarea><Br>
Put 2nd urls in this box: <Br>
<textarea NAME="inputbox2" id="input_box2" VALUE=""rows="4" cols="75"></textarea><Br>
<INPUT TYPE="reset">
</FORM>
</BODY>
</HTML>
This should work for you
HTML
<input id="Split" type="button" value="Add to boxes" />
<Br>
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea>
<Br>
<FORM NAME="myform" ACTION="" METHOD="GET">Put 1st urls in this box:
<textarea NAME="inputbox" id="input_box1" VALUE="" rows="4" cols="75"></textarea>
<Br>Put 2nd urls in this box:
<Br>
<textarea NAME="inputbox2" id="input_box2" VALUE="" rows="4" cols="75"></textarea>
<Br>
<INPUT id="reset" TYPE="reset">
</FORM>
Javascript
var aBox1 = [];
var aBox2 = [];
document.getElementById("Split").addEventListener("click", function () {
var urls_1 = document.getElementById("text_to_split").value.trim().split(" "),
url1 = urls_1[0] || "",
url2 = urls_1[1] || "";
if (url1.length) {
aBox1.push(url1);
}
if (url2.length) {
aBox2.push(url2);
}
document.getElementById("input_box1").value = aBox1.join(" ");
document.getElementById("input_box2").value = aBox2.join(" ");
}, false);
document.getElementById("reset").addEventListener("click", function () {
aBox1.length = 0;
aBox2.length = 0;
}, false);
On jsfiddle
i have my code(html/javascript) here which allows user to input the size and color of the square.The problem is when i click the go button the textfields disappear including the button and the one that displays is the output.Is there any ways that i could retain the textfields and the button then output the square below it?
<html>
<head>
<script type="text/javascript">
size=0;
function display(form){
size=form.inputbox.value;
color=form.inputbox2.value;
for(i=0;i<size;i++){
for(j=0;j<size;j++){
if(i==0||i==(size-1)){
document.write("<font color="+color+">* ");
}
else if (j == 0||j == (size-1)) {
document.write("* ");
}
else {
document.write(" ");
}
}
document.write("<br>");
}
}
</script>
</head>
<body>
<form name="form1" action="" method="get">
Input size of the square:
<input type="text" name="inputbox" value=""><br>
Input color of the square:
<input type="text" name="inputbox2" value="">
<input type="button" name="button" value="Go" onClick="display(this.form)">
</form>
</body>
</html>
Calling document.write on a page that has completed rendering will destroy the exiting DOM document on the page, replacing it with only the newly written HTML elements.
If you wish to add to existing DOM elements, select an element and write to its innerHTML property instead.
<html>
<head>
<script type="text/javascript">
size=0;
function display(form){
size=form.inputbox.value;
color=form.inputbox2.value;
// A node to write into
writeTo = document.getElementById('writeTo');
for(i=0;i<size;i++){
for(j=0;j<size;j++){
if(i==0||i==(size-1)){
writeTo.innerHTML = writeTo.innerHTML + "<font color="+color+">* ";
}
else if (j == 0||j == (size-1)) {
writeTo.innerHTML = writeTo.innerHTML + "* ";
}
else {
writeTo.innerHTML = writeTo.innerHTML + " ";
}
}
writeTo.innerHTML = writeTo.innerHTML + "<br>";
}
}
</script>
</head>
<body>
<form name="form1" action="" method="get">
Input size of the square:
<input type="text" name="inputbox" value=""><br>
Input color of the square:
<input type="text" name="inputbox2" value="">
<input type="button" name="button" value="Go" onClick="display(this.form)">
</form>
<div id='writeTo'></div>
</body>
</html>
And add an empty node to your HTML something like:
<div id='writeTo'></div>
Here it is in action on jsFiddle.net
To get the square to be all the correct color, it is easiest to change the CSS color property of <div id='writeTo'>
document.getElementById('writeTo').style.color = color;