I want to make ordered list in my little script, but I have no idea how to start it. Can you give me some advice? I think it would be more usefull than just code. The question is: how to display it on website as ordered list?
Here is my javascript and HTML:
var numnames = 0;
var names = new Array();
function SortNames() {
thename = document.theform.newname.value;
names[numnames] = thename;
names[numnames] = thename.toUpperCase();
numnames++;
names.sort();
document.theform.sorted.value=names.join("\n");
}
<h1>Sorting list</h1>
<p>Instert text</p>
<form name="theform">
<p>Text:</p>
<input type="text" name="newname" size="20">
<input type="button" name="addname" value="add" onclick="SortNames();">
<h2>Sorted txt</h2>
<textarea cols="80" rows="20" name="sorted">
text
</textarea>
</form>
You mean like this?
var numnames = 0;
var names = new Array();
function SortNames() {
thename = document.theform.newname.value;
names[numnames] = thename;
names[numnames] = thename.toUpperCase();
numnames++;
names.sort();
var ol = document.getElementById('out');
ol.innerHTML = '';
names.forEach(function(name) {
var li = document.createElement('li');
li.innerHTML = name;
ol.appendChild(li);
});
}
<h1>Sorting list</h1>
<p>Instert text</p>
<form name="theform">
<p>Text:</p>
<input type="text" name="newname" size="20">
<input type="button" name="addname" value="dodaj" onclick="SortNames();">
<h2>Sorted txt</h2>
<ol id='out'></ol>
</form>
Try this (I also simplified your code):
var names = new Array(); // you should use var names = [];
function SortNames() {
names.push(document.theform.newname.value);
names.sort();
var list = document.getElementById('list');
list.innerHTML = '<li>' + names.join('</li><li>') + '</li>';
}
<h1>Sorting list</h1>
<p>Instert text</p>
<form name="theform">
<p>Text:</p>
<input type="text" name="newname" size="20">
<input type="button" name="addname" value="dodaj" onclick="SortNames();">
<h2>Sorted txt</h2>
<ol id="list"></ol>
</form>
You can do very similar to what you've already done, but rather than write the element to a textarea write them to an ol element.
var numnames = 0;
var names = new Array();
function SortNames() {
thename = document.theform.newname.value;
names[numnames] = thename; // NOTE: this line is obsolete
names[numnames] = thename.toUpperCase();
numnames++;
names.sort();
var ol = document.getElementById("list");
ol.innerHTML = names.map(function(n){
return "<li>" + n + "</li>"
}).join("") ;
}
<h1>Sorting list</h1>
<p>Instert text</p>
<form name="theform">
<p>Text:</p>
<input type="text" name="newname" size="20">
<input type="button" name="addname" value="dodaj" onclick="SortNames();">
<h2>Sorted txt</h2>
<ol id="list"></ol>
</form>
If you wanted to keep this in a textarea just manually create the numbers
var numnames = 0;
var names = new Array();
function SortNames() {
thename = document.theform.newname.value;
names[numnames] = thename;
names[numnames] = thename.toUpperCase();
numnames++;
names.sort();
document.theform.sorted.value=names.map(function(n,i){
return (i + 1) + '. ' + n;
}).join('\n')
}
<h1>Sorting list</h1>
<p>Instert text</p>
<form name="theform">
<p>Text:</p>
<input type="text" name="newname" size="20">
<input type="button" name="addname" value="add" onclick="SortNames();">
<h2>Sorted txt</h2>
<textarea cols="80" rows="20" name="sorted">
text
</textarea>
</form>
Check this w3school it about how to build list by html
Another one thing you should check is how to work with DOM elements, simply like
document.getElementById("main").innerHtml = "<ol><li></li></ol>"
check this out js DOM
var names = new Array();
var ol = document.getElementById("sorted");
function SortNames() {
var input = document.theform.newname; // get the input
thename = input.value; // store its value
input.value = ""; // clear it's value
names.push(thename.toUpperCase()); // push it into the array in uppercase
names.sort(); // sort the array
ol.innerHTML = "";
names.forEach(function(name){
var li = document.createElement("li");
li.textContent = name;
ol.appendChild(li);
});
}
<h1>Sorting list</h1>
<p>Instert text</p>
<form name="theform">
<p>Text:</p>
<input type="text" name="newname" size="20">
<input type="button" name="addname" value="dodaj" onclick="SortNames();">
<h2>Sorted txt</h2>
<ol id="sorted"></ol>
</form>
Instead of recreating the HTML list each time, just insert the element right into the list.
var form = document.forms['theform'];
var list = document.getElementById('name-list');
var names = new Array();
function sortNames(button) {
var name = form['newname'].value.toUpperCase();
if (names.indexOf(name) > -1) {
alert('Name already present!');
return;
}
// Add the new name and sort the list.
names.push(name);
names.sort();
// Create new list item.
var listItem = document.createElement('LI');
listItem.appendChild(document.createTextNode(name));
// Insert the new list item into the list.
var newIndex = names.indexOf(name);
list.insertBefore(listItem, list.childNodes[newIndex]);
}
<h1>Sorting list</h1>
<p>Instert text with auto-sorting.</p>
<form name="theform">
<p>
Text:
<input type="text" name="newname" size="20">
<input type="button" name="addname" value="Add" onclick="sortNames(this)">
</p>
<h2>Sorted txt</h2>
<ol id="name-list"></ol>
</form>
Related
In the text field inputAddLabel some character is entered. When you click the Add tag button, the eventpushLabel ()is triggered. However, not every symbol should be added, but only one that is contained in listAlphabet. That is, a check must be carried out on the belonging of the added label to the alphabet.
function pushAlphabet() {
var alph = document.getElementById("inputAddAlphabet").value;
if(alph.length == 1){
var li = document.createElement("li");
li.textContent = alph + " ";
document.getElementById("listAlphabet").appendChild(li);
} else { alert('error');}
}
function pushLabel() {
var label = document.getElementById("inputAddLabel").value;
console.log("label", label);
var li = document.createElement("li");
li.textContent = label + " ";
document.getElementById("listLabels").appendChild(li);
}
<div class="alphabet">
<form>
<input id="inputAddAlphabet" type="text">
<input type="button" value="add symbol" onclick="pushAlphabet()">
</form>
<ul id="listAlphabet"></ul>
</div>
<div class="labels">
<form>
<input type="text" id="inputAddLabel">
<input type="button" value="add label" onclick="pushLabel()">
</form>
<ul id="listLabels"></ul>
</div>
Keep track of the pushed symbols (alphabet) and use them to filter the label:
var allowedLabels = [];
function pushAlphabet() {
var alph = document.getElementById("inputAddAlphabet").value;
allowedLabels.push(alph);
var li = document.createElement("li");
li.textContent = alph + " ";
document.getElementById("listAlphabet").appendChild(li);
document.getElementById("inputAddAlphabet").value = "";
}
function pushLabel() {
var label = document.getElementById("inputAddLabel").value;
console.log("label", label);
if (allowedLabels.indexOf(label) >= 0) {
var li = document.createElement("li");
li.textContent = label + " ";
document.getElementById("listLabels").appendChild(li);
document.getElementById("inputAddLabel").value = "";
} else { alert('error');}
}
<div class="alphabet">
<form>
<input id="inputAddAlphabet" type="text">
<input type="button" value="add symbol" onclick="pushAlphabet()">
</form>
<ul id="listAlphabet"></ul>
</div>
<div class="labels">
<form>
<input type="text" id="inputAddLabel">
<input type="button" value="add label" onclick="pushLabel()">
</form>
<ul id="listLabels"></ul>
</div>
There is a list of rules. The rules specify how to change the word entered. The screenshot shows an example of how the program should work. The result should be a string "aBct". I don't understand how to do this.
function pushRules(list){
var rules = "";
var w1 = document.getElementById('inputw1').value;
var w2 = document.getElementById('inputw2').value;
var w = w1+'-->'+w2;
var li = document.createElement("li");
var rule = document.createTextNode(w);
li.appendChild(rule);
}
function applyRule() {
var str = document.getElementById('inputString').value;
var numRule = document.getElementById('inputNumRules').value;
for(var i=0; i<str.length; i++){
// ...
}
}
<div class="addRules">
<h3>Add Rules</h3>
<form>
<label>w1:</label><input id="inputw1" type="text"><label> --> w2:</label><input id="inputw2" type="text">
<input type="button" value="Add" onclick="pushRules()">
</form>
<h3>Rules:</h3>
<div class="container_rules">
<ui id="list"></ui>
</div>
</div>
<h3>Input string</h3>
<input type="text" id="inputString">
<form>
<p>Apply the selected rule to the symbol at number:</p><input type="text" id="inputNumRules" value="0">
<input type="button" value="Apply rule" onclick="applyRule()">
</form>
<h3>Result</h3>
Working solution.
Just insert rules and then write the number of rule you want to apply starting from 0
var changeStringFromRules = [];
var changeStringToRules = [];
function pushRules(list){
var rules = "";
var w1 = document.getElementById('inputw1').value;
changeStringFromRules.push(w1);
var w2 = document.getElementById('inputw2').value;
changeStringToRules.push(w2);
var w = w1+'-->'+w2;
var li = document.createElement("li");
var rule = document.createTextNode(w);
li.appendChild(rule);
document.getElementById("list").appendChild(li);
}
function applyRule() {
var str = document.getElementById('inputString').value;
var numRule = parseInt(document.getElementById('inputNumRules').value);
if(str.indexOf(changeStringFromRules[numRule])!== -1){
str = str.replace(changeStringFromRules[numRule], changeStringToRules[numRule]);
}
document.getElementById("result").innerHTML = str;
}
<div class="addRules">
<h3>Add Rules</h3>
<form>
<label>w1:</label><input id="inputw1" type="text"><label> --> w2:</label><input id="inputw2" type="text">
<input type="button" value="Add" onclick="pushRules()">
</form>
<h3>Rules:</h3>
<div class="container_rules">
<ui id="list"></ui>
</div>
</div>
<h3>Input string</h3>
<input type="text" id="inputString">
<form>
<p>Apply the selected rule to the symbol at number:</p><input type="text" id="inputNumRules" value="0">
<input type="button" value="Apply rule" onclick="applyRule()">
</form>
<h3>Result</h3>
<p id="result"></p>
If I understood the question correctly, You just have to replace few characters in the input string with other characters.
You can use replace() method.
So all you have to do is,
"aBcah".replace(/ah/g,'t');
This means, replace all occurrences of ah with t in the string aBcah.
I have used a regex here and /g means to remove all(global flag), without it, it will only remove the first occurrence.
var a = "aBcah".replace(/ah/g,'t');
console.log(a);
When I want to check my text type variable and display every char of it then it return numbers of value. And second problem when I give the variable to replace then it's undefined. Why is that, do you think?
<script>
function checkSpace(x) {
// alert(x.value.toString());
for (var charS in x.value.toString()) {
alert(charS);
}
return x.value.replace(" ", "");
}
var wykonawca = document.getElementById("informations").artist;
var tytul = document.getElementById("informations").title;
var addd = document.getElementById("tabelkaa");
var minus = document.getElementById("minus");
var plus = document.getElementById("plus");
var row = document.getElementById("effect");
plus.onclick = function (e) {
var replacedText1 = checkSpace(wykonawca);
var replacedText2 = checkSpace(tytul);
addd.innerHTML = "Artist: " + replacedText1 + "Title: " + replacedText2;
}
</script>
<body>
<div id="informationss">
<form id="informations">
<p>Wykonawca <input type ="text" name="artist"required> </p>
<p> Tytul <input type ="text" name="title" required> </p>
</form> <br/>
<input type="submit" value="-" id="minus">
<input type="submit" value="+" id="plus"> <br/>
<div id="effect"> </div>
</div>
<div id ="tabelka">
<table id="tabelkaa" border="5"></table>
</div>
</body>
charS is the index. x.value[charS] is the letter at the charS position.
Also replace(/ /g, "") will replace all spaces.
function checkSpace(x) {
// alert(x.value.toString());
for (var charS in x.value) {
alert(x.value[charS]);
}
return x.value.replace(/ /g, "");
}
var wykonawca = document.getElementById("informations").artist;
var tytul = document.getElementById("informations").title;
var addd = document.getElementById("tabelkaa");
var minus = document.getElementById("minus");
var plus = document.getElementById("plus");
var row = document.getElementById("effect");
plus.onclick = function (e) {
var replacedText1 = checkSpace(wykonawca);
var replacedText2 = checkSpace(tytul);
addd.innerHTML = "Artist: " + replacedText1 + " Title: " + replacedText2;
}
<body>
<div id="informationss">
<form id="informations">
<p>Wykonawca <input type ="text" name="artist"required> </p>
<p> Tytul <input type ="text" name="title" required> </p>
</form>
<br/>
<input type="submit" value="-" id="minus">
<input type="submit" value="+" id="plus"> <br/>
<div id="effect"></div>
</div>
<div id ="tabelka">
<table id="tabelkaa" border="5">
</table>
</div>
</body>
First of all, for..in iterates through object keys or array indexes. If you want to iterate through values, use for..of
Second, if you want to remove all spaces from string, use x.value.replace(/ /g, "") instead of x.value.replace(" ", "") wich will replace only the first space.
<body>
<div id="informationss">
<form id="informations">
<p>Wykonawca <input type ="text" name="artist"required> </p>
<p> Tytul <input type ="text" name="title" required> </p>
</form>
<br/>
<input type="submit" value="-" id="minus">
<input type="submit" value="+" id="plus"> <br/>
<div id="effect"></div>
</div>
<div id ="tabelka">
<table id="tabelkaa" border="5">
</table>
</div>
</body>
<script>
function checkSpace(x) {
// alert(x.value.toString());
for (var charS of x.value.toString()) {
alert(charS);
}
return x.value.replace(/ /g, "");
}
var wykonawca = document.getElementById("informations").artist;
var tytul = document.getElementById("informations").title;
var addd = document.getElementById("tabelkaa");
var minus = document.getElementById("minus");
var plus = document.getElementById("plus");
var row = document.getElementById("effect");
plus.onclick = function (e) {
var replacedText1 = checkSpace(wykonawca);
var replacedText2 = checkSpace(tytul);
addd.innerHTML = "Artist: " + replacedText1 + " Title: " + replacedText2;
}
</script>
I want to make a JavaScript function, which, after pressing a button, takes the list of checkbox elements with their content, checks all the checkboxes, creates a div element with these checkboxes and writes the result to the HTML form.
Here is my code:
function confirmDrivers() {
$('#selectedList').find('.chk').prop("checked", true);
var list = document.getElementById('selectedList').getElementsByTagName("li");
var myForm = document.getElementById('formInput');
var text = "<strong>Selected Drivers: </strong> <br><br>";
var myDiv = document.createElement("div");
myDiv.setAttribute("id","selectedInputDrivers");
myDiv.style.overflowY = "auto";
myDiv.style.maxHeight = "100px";
myDiv.style.maxWidth = "250px";
for (i = list.length - 1; i >= 0; i--) {
myDiv.innerHTML = list[i].innerHTML+'<br>'+myDiv.innerHTML;
}
$("formInput").find('.chk').prop("checked", true);
myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
myForm.innerHTML = text + myForm.innerHTML;
}
Here is the HTML Div element with the list of checkbox elements. They also appear dynamically. Initially, Div is empty.
<div id = "selectedList" class = "col" style=" max-height:200px; max-width:500px;display: inline-block; background:#A8D9F1; overflow-y:auto">
<strong style="margin-right:10px">Selected List of Drivers</strong>
<input type="button" style="margin-right:10px" value="Remove All" name="removeAllDr" onclick="removeAllDrivers()" />
<input type="button" id="confirmD" value="Confirm" name="confirm" onclick="confirmDrivers()" />
<br><br>
</div>
And this is the HTML form, where I want my result to appear:
<form id="formInput">
</form>
The problem here is that it checks all the checkboxes in my list, but in the resulting HTML form they appear unchecked again. What is wrong with it? Thank you
Besides replacing prop() to attr() as Rik Lewis correctly recommended you can alternately put the line
$("formInput").find('.chk').prop("checked", true);
at the bottom of the function and add the # character in front the selector id like this:
function confirmDrivers() {
$('#selectedList').find('.chk').prop("checked", true);
var list = document.getElementById('selectedList').getElementsByTagName("li");
var myForm = document.getElementById('formInput');
var text = "<strong>Selected Drivers: </strong> <br><br>";
var myDiv = document.createElement("div");
myDiv.setAttribute("id","selectedInputDrivers");
myDiv.style.overflowY = "auto";
myDiv.style.maxHeight = "100px";
myDiv.style.maxWidth = "250px";
for (i = list.length - 1; i >= 0; i--) {
myDiv.innerHTML = list[i].innerHTML+'<br>'+myDiv.innerHTML;
}
myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
myForm.innerHTML = text + myForm.innerHTML;
$("#formInput").find('.chk').prop("checked", true);
}
function confirmDrivers() {
$('#selectedList').find('.chk').prop("checked", true);
var list = document.getElementById('selectedList').getElementsByTagName("li");
var myForm = document.getElementById('formInput');
var text = "<strong>Selected Drivers: </strong> <br><br>";
var myDiv = document.createElement("div");
myDiv.setAttribute("id", "selectedInputDrivers");
myDiv.style.overflowY = "auto";
myDiv.style.maxHeight = "100px";
myDiv.style.maxWidth = "250px";
for (i = list.length - 1; i >= 0; i--) {
myDiv.innerHTML = list[i].innerHTML + '<br>' + myDiv.innerHTML;
}
myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
myForm.innerHTML = text + myForm.innerHTML;
$("#formInput").find('.chk').prop("checked", true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectedList" class="col" style=" max-height:200px; max-width:500px;display: inline-block; background:#A8D9F1; overflow-y:auto">
<strong style="margin-right:10px">Selected List of Drivers</strong>
<input type="button" style="margin-right:10px" value="Remove All" name="removeAllDr" onclick="removeAllDrivers()" />
<input type="button" id="confirmD" value="Confirm" name="confirm" onclick="confirmDrivers()" />
<br>
<br>
<ul>
<li>
<input type="checkbox" class="chk" value="test" />
</li>
<li>
<input type="checkbox" class="chk" value="test" />
</li>
<ul>
</div>
<form id="formInput">
</form>
<div id="cblist">
<input type="checkbox" value="first checkbox" id="cb1" /> <label for="cb1">first checkbox</label>
</div>
<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />
<script type="text/javascript">
$(document).ready(function() {
$('#btnSave').click(function() {
addCheckbox($('#txtName').val());
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
var html = '<input type="checkbox" id="cb'+id+'" value="'+name+'" /> <label for="cb'+id+'">'+name+'</label>';
container.append($(html));
}
</script>
I want to total the values of all input, but in the beginning there's only one input element and you add the clone(s) with a button. Actually I have two issues:
1. How to place the clone node always under the node before it.
2. How to total the values of all nodes.
Here's the code:
function nambahData() {
var a = document.getElementById("harga");
var b = a.cloneNode(false);
document.getElementById("form").appendChild(b);
}
function ditotal() {
var x = document.getElementById("harga").value;
var y = document.getElementById("harga").childNode.value;
document.getElementById("total").value = parseInt(x) + parseInt(y);
}
</script>
<div id="form">
<input id="harga" type=number>
<br>
</div>
<button onclick="nambahData()">add data</button>
<br>
<button onclick="ditotal()">total all</button>
<input id="total" type=number>
Hope this helps you ..
window.nambahData = function() {
var a = document.getElementsByName("harga");
var b = a[0].cloneNode(false);
document.getElementById("form").appendChild(b);
}
window.ditotal = function() {
var totalItems = 0;
for(i=document.getElementsByName("harga").length-1;i>=0;i--)
{
var item = document.getElementsByName("harga")[i];
totalItems += parseFloat(item.value);
}
document.getElementById("total").value = totalItems;
}
.inputStyle{
display:block;
}
<div id="form">
<input name="harga" type="number" class="inputStyle">
</div>
<button onclick="nambahData()">add data</button>
<br>
<button onclick="ditotal()">total all</button>
<input id="total" type=number>