I created a couple inputs that feed into a JavaScript command to create custom sentences. Whatever the user inputs or selects is added to a sentence framework. When the user selects submit, the sentence is created in a textarea. How can I add a feature to my app that counts the words within the textarea? I simply want a small text box to the bottom right of the text area that states how many words are in the text area.
Thanks so much for your help!
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<style type="text/css">
table,td,th {margin-left: auto;margin-right: auto}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}
.chosen-select {width:200px}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
function sentence() {
document.getElementById("s1").value = "";// reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Year, Make, and Model are needed");
document.getElementById("z1").focus();
}
else {
const input1 = document.getElementById("z1").value;
var input3 = $('#z3').val();
console.log(input3);
var input3Formatted = "";
if(input3.length==1){
// Only one value...
input3Formatted = input3[0];
}
if(input3.length==2){
// Two values... Just add and "and"
input3Formatted = input3[0]+" and "+input3[1];
}
if(input3.length>2){
// more than 2 values...
for(i=0;i<input3.length-1;i++){
input3Formatted += input3[i]+", ";
}
input3Formatted += "and "+input3[input3.length-1];
}
const input5 = "It has minor curb rash on the "+input3Formatted+"."
const input7 = document.getElementById("z5").value;
document.getElementById("s1").value =
"This is my " +input1+ ". It is in good condition.The vehicle's rims have curb rash. "+input5+" The "+input1+"'s color is "+input7+"."
}
}
function reset() {
document.getElementById("s1").value = "";
}
</script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
})
});
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100" >
</td>
<td>
<select data-placeholder="Minor Curb Rash" name="minorrash" multiple class="chosen-select" id="z3">
<option value=""></option>
<option value="front left rim">Front Left Rim</option>
<option value="back left rim">Back Left Rim</option>
<option value="front right rim">Front Right Rim</option>
<option value="back right rim">Back Right Rim</option>
</select>
</td>
<td>
<input type="text" id="z5" placeholder="Color" name="name" maxlength="100">
</td>
</tr>
</table>
<br>
<div class="display">
<button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>
<div class="display">
<button onclick="reset()" id="r1">Reset</button>
</div>
</body>
</html>
i don t know if this is what are you trying, this is what I understood of your question:
<script type="text/javascript">
var nameValidationInput = document.getElementById('s1');//here you search in your text area al the words
function useValue() {
var NameValue = nameValidationInput.value;
document.getElementById("demo").innerHTML = NameValue.split(" ").length // here you count the word separated by a space
}
</script>
<br>
<textarea rows="1" cols="5" id="demo"></textarea>// just to show the count in the text area
<br>
in this way the function will count each word separated for a space (if you want something more detailed if will be a much more dificult)
Well, the simplest way to do it is to store all the text from the textarea in an array (separated by white spaces). You can use .split to achieve that. Once done, then simply get the length of the array. It'll return the world count.
Try this.
var splitData = textarea.value.split(" ");
var wordCount = splitData.length;
I will leave a another version of what was sugested. Using length is not enough because it will count every whitespace as a word, and at the begining it will count 1 word even when its empty. I sugest using trim() and filter to prevent those bugs, for example:
wordsArr = text.trim().split(" ")
wordsArr.filter(word => word !== "").length
Related
I am trying to loop in HTML Select in JavaScript. Below is my code. I want to display my COUNT value in option. I am getting some data from PHP end & it need to be display the count. Please advise if i am missing anything or is it wrong way ?
var cjs=$form.find('[name="cjs"]').data("cjs");
var newHtml = 'Current<br>\
<select class="form-control" id="priority" name="priority">\
'+for (var i = 1; i <= cjs; i++) {+'\
<option disabled selected value ="0" style="display:none">-CHOOSE PRIORITY-</option>\
'+}+'\
</select>\
<button class=" upr edit btn btn-sm btn-primary"> Update </button></center></div>';
$('.proo'+request).html(newHtml);
alert("Successfully Updated");
check this maybe it will helpful for you
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date Picker</title>
</head>
<body>
<p>Click the button to loop through a block of code five times.</p>
<select id="demo">
</select>
<p id="demo"></p>
<script>
function myFunction(selector)
{
var optionList="CHOOSE PRIORITY "
var i;
for (i=1;i<=5;i++){
selector.options[i-1] = new Option(optionList+i);
}
}
//usage:
myFunction(document.getElementById("demo"));
</script>
</body>
</html>
How can the code below be modified, such that I would be able to add single and comma separated values to a select box?
Example 1: orange
[SELECT BOX]
orange
Example2: red,blue,green,yellow
[SELECT BOX]
red
blue
green
yellow
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function add() {
var select = document.getElementById('list')
var option = document.getElementById('reference').value
select.options[select.options.length] = new Option(option, option)
}
</script>
</head>
<body>
<input type="button" value="add" onclick="add()">
<input type="text" id="reference">
<br><br>
<select style="width: 200px;" id="list"><option>
</body>
</html>
Simply split the value by a comma, and then loop through each of the strings, appending the option as you go:
function add() {
var select = document.getElementById('list')
var options = document.getElementById('reference').value.split(',');
for(i=0; i<options.length; i++){
select.options[select.options.length] = new Option(options[i], options[i])
}
}
JSFiddle
i want to move the selected item of a select tag (list box) into a text box after clicking a button. i am using the below code
<html>
<head>
<script type="text/javascript">
function copy()
{
var sel = document.getElementById('lb').value;
document.getElementById('FileName').value = sel;
}
</script>
</head>
<body>
<form name="frm1" id="frm1">
<select id="lb" name="lb" size="5">
<option value="abc.txt">abc.txt</option>
<option value="def.txt">def.txt</option>
</select>
<input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">
<input type="text" name="FileName" id="FileName">
</form>
</body>
</html>
the above code works properly in google chrome browser but it does not work when i run the page in IE. can anyone tell me whats the problem in the code and kindly suggest a javascript or any other code which is compatible ith both google chrome and IE.
above code works after i allow the pop up that comes but
actually the below code is not working.
<html>
<head>
<title>FILE</title>
<style>
body{background-color:#b0c4de;}
#OutBound{text-align:center;}
#btn_sbmt{position:absolute;top:150px;left:700px;}
#div_text_label{position:absolute;top:50px;left:200px;}
#lbl2{position:absolute;top:80px;left:200px;}
#selected_list{position:absolute;width:300px;top:80px;left:335px;}
#btn_move{position:absolute;top:100px;left:650px;}
#FileName{position:absolute;width:300px;top:100px;left:700px;}
</style>
<script type="text/javascript">
function load_list()
{
document.getElementById('div_main_select').style.display="none";
var textbox = document.getElementById('pattern');
var listbox = document.getElementById('selected_list');
var mainListbox = document.getElementById('lb');
listbox.innerHTML = '';
for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
{
var child = mainListbox.children[childIndex];
option = document.createElement('option');
option.innerHTML = child.innerHTML;
listbox.appendChild(option);
}
alert (load_list_1);
}
function get_list()
{
var textbox = document.getElementById('pattern');
var listbox = document.getElementById('selected_list');
var mainListbox = document.getElementById('lb');
listbox.innerHTML = '';
for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
{
var child = mainListbox.children[childIndex];
if (child.innerHTML.search(textbox.value) != -1)
{
option = document.createElement('option');
option.innerHTML = child.innerHTML;
listbox.appendChild(option);
}
}
alert (get_list_1);
}
function copy()
{
var sel = document.getElementById('selected_list').value;
document.getElementById('FileName').value = sel;
alert (copy_1);
}
</script>
</head>
<body style="color: black; background-color: rgb(255, 255, 255); background-image: url(background-1204x927.jpg);" BGCOLOR="#ffffff" text="black" link="#B03060" vlink="#B03060" onload="load_list()">
<hr>
<form id="OutBound" name="OutBound" action="" method="GET">
<div style="text-align:center;" id="div_text_label" name="div_text_label">
<label id="lbl1" name="lbl1">search :</label>
<input type="text" name="pattern" id="pattern" onKeyUp="get_list()">
</div>
<div style="text-align:center;" id="div_main_select" name="div_main_select">
<select id="lb" name="lb" size="5">
<option value="abc.txt">abc.txt</option>
<option value="def.txt">def.txt</option>
</select>
</div>
<label id="lbl2" name="lbl2">File List:</label>
<select id="selected_list" name="selected_list" size="5">
</select><br>
<input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">
<input type="text" name="FileName" id="FileName">
<input type="submit" name="btn_sbmt" id="btn_sbmt" value="MOVE FILES">
</form>
</body>
</html>
the page works like this..
1) there is a list box (lb) populated with some items.
2) there is 1 more empty list box (selected_list).
3) when the page form is loaded load_list() function is called which loads the empty list box (selected_list) with the contents of the original list box (lb).
4) when someone enters a word or a letter in the search text box then get_list() function is called which filters the files according to the words entered.
5) when a filename is selected in the selected_list and >> button is pressed, the copy() function is called and the filename is copied to the FILENAME text box.
but this all is not working in IE but it works in google chrome. can anyone fix the code so that it works with IE also.
Try this:
function copy() {
var sel = document.getElementById('lb');
document.getElementById('FileName').value = sel.options[sel.selectedIndex].text;
}
The code works fine (see fiddle in IE)
If you are opening the file from local file system, the IE may ask your permission to run script. You should click "Allow Blocked Content" for it to work
See image below
Try this using jQuery (1.10.1)
function copy()
{
$("#FileName").val($("#lb").val());
}
http://jsfiddle.net/7Axu8/
Update
http://jsbin.com/onayow/1
Hi I've done a lot of searching round but can't find anything concrete or that i can get working in my example. Was wondering if anyone could help. I've never used javascript before but have been asked for an assessment to code a piece of software to keep track of a score in a ten pin bowling game. I'm reading up as much as I can but there are a few things I'm still struggling on. I've made a form for the players to input their names and I want to be able to hide the form once they have inputted their names, thus making the interface look less cluttered. Have tried numerous methods but none seem to work for me, I've tried placing the form in a div and using an onClick event to hide the div but it doesn't seem to recognise the div etc, was looking for a few pointers, have taken my failed attempts out of the code to try and give a clear code for you to look at, thank you in advance
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<style id="jsbin-css">
</style>
<script>
function myFunction()
{
document.getElementById("formy").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<p id="formy"><form>
<h1>Please enter player names!</h1>
<input id="player1" type="text" placeholder="Player 1" />
<input id="player2" type="text" placeholder="Player 2" />
<input id="player3" type="text" placeholder="Player 3" />
<input id="player4" type="text" placeholder="Player 4" />
<input id="player5" type="text" placeholder="Player 5" />
<input id="player6" type="text" placeholder="Player 6" />
<input type="button" value="Save/Show" onclick="insert(),close.this", />
</form></p>
<div id="display"></div>
<script>
var titles = [];
var names = [];
var tickets = [];
var player1Input = document.getElementById("player1");
var player2Input = document.getElementById("player2");
var player3Input = document.getElementById("player3");
var player4Input = document.getElementById("player4");
var player5Input = document.getElementById("player5");
var player6Input = document.getElementById("player6");
var messageBox = document.getElementById("display");
function insert ( ) {
titles.push( player1Input.value );
names.push( player2Input.value );
tickets.push( player3Input.value );
clearAndShow();
}
function clearAndShow () {
// Show our output
messageBox.innerHTML = "";
messageBox.innerHTML += "<td>*" + player1Input.value + "<br/><td/>";
messageBox.innerHTML += "*" + player2Input.value + "<br/>";
messageBox.innerHTML += "*" + player3Input.value +"<br/>";
messageBox.innerHTML += "*" + player4Input.value + "<br/>";
messageBox.innerHTML += "*" + player5Input.value + "<br/>";
messageBox.innerHTML += "*" + player6Input.value;
// Clear fields
titleInput.value = "";
nameInput.value = "";
ticketInput.value = "";
}
</script>
</body>
</html>
Place an id on the form. Hide the form on the button click. Test it here.
<html>
<form id="b">
<textarea>hey</textarea>
<button onclick="hide(); return false;">click me</button>
</form>
<script>
function hide()
{
document.getElementById('b').style.display='none';
}
</script>
</html>
You can get the element then set style.display='none' to hide it. I put in a return false; to keep the form from posting, and I added the function to a <script> for readability.
In one of your functions, try this to hide everything in the p tag:
document.getElementById("formy").style.display = "none";
Also, I am not sure what you are trying to do on the onclick with 'close.this' - I would personally change it so you just have the function call (if there is an error in your onclick attribute, then the function may not be called):
<input type="button" value="Save/Show" onclick="insert()" />
I have 2 textBox and 1 button!
I want to insert text to one of these textboxs. When I click to textbox_1 and click button, mytext will appear at textbox_1. When I click to textbox_2 and click button, mytext will appear at textbox_2.
How can I do this by using JavaScript?
Please help me! I'm new on JavaScript!
put id's of the two textboxes as textbox_1 and textbox_2 and put onclick='onCLickButton();' on the <button> tag
and write the following code in the script
var text_to_be_inserted = "sample";
function onCLickButton(){
document.getElementById("textbox_1").value='';
document.getElementById("textbox_2").value='';
if(document.getElementById("textbox_1").focused){
document.getElementById("textbox_1").value=text_to_be_inserted;
}
else if(document.getElementById("textbox_2").focused){
document.getElementById("textbox_2").value=text_to_be_inserted;
}
else{
// do nothing
}
}
Edited
Please accept my apologies actually I am used to use these functions as I have my own js file having these functions.
please add onfocus='onFocusInput(this);' in the <input> tags and add the following code in the script
function onFocusInput(object){
document.getElementById("textbox_1").focused=false;
document.getElementById("textbox_2").focused=false;
object.focused = true;
}
<html>
<head>
<script type="text/javascript">
var index = false;
var text = "This text shifts to text box when clicked the button";
function DisplayText(){
if(!index){
document.getElementById("txt1").value = text;
document.getElementById("txt2").value = "";
}
else{
document.getElementById("txt2").value = text;
document.getElementById("txt1").value = "";
}
index = index ? false : true;
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="button" value="Change Text" onclick="DisplayText()"/>
</body>
</html>
Take a look at the onFocus() attribute for the INPUT tag - and think about keeping track of what was last given the focus. I'm being a little vague as this sounds a lot like homework.
It isn't the prettiest / most delicate solution, but it works and you can build off it to fulfill your needs.
<script>
var field = 0;
function addText(txt){
if(field === 0) return false;
field.value = txt;
}
</script>
For a form such as
<form>
<input type="text" name="box1" id="box1" onfocus="field=this;" />
<input type="text" name="box2" id="box2" onfocus="field=this;" />
<input type="button" onclick="addText('Hello Thar!');" />
</form>