Develop Reference

letter replacement according to given rules

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);

Html in Python communicating with JavaScript in Python

I have an html form that places text field data into a Javascript array. The code is shown here:http://jsbin.com/maniwu/3/edit?html,js,output.
var message = [];
var receiverInput = document.getElementById("Receiver");
var classificationInput = document.getElementById("Classification");
var titleInput = document.getElementById("Title");
var senderInput = document.getElementById("Sender");
var dateInput = document.getElementById("Date");
var messageBox = document.getElementById("display");
function insert() {
message.push(receiverInput.value);
message.push(classificationInput.value);
message.push(titleInput.value);
message.push(senderInput.value);
message.push(dateInput.value);
clearAndShow();
}
function clearAndShow() {
// Clear our fields
receiverInput.value = "";
classificationInput.value = "";
titleInput.value = "";
senderInput.value = "";
dateInput.value = "";
// Show our output
messageBox.innerHTML = "";
messageBox.innerHTML += "Sent Header " + message + "<br/>";
}
<html>
<body>
<form>
<input id="Receiver" type="text" placeholder="Receiver" />
<input id="Classification" type="text" placeholder="Classification" />
<input id="Title" type="text" placeholder="Title" />
<input id="Sender" type="text" placeholder="Sender" />
<input id="Date" type="text" placeholder="Date" />
<input type="button" value="Save/Show" onclick="insert()" />
</form>
<div id="display"></div>
</body>
</html>
But I want each embedded in Python 2.7 (windows, IDE: spyder) as shown below. How do I get them to communicate?
import js2py
js = ""
"
function classCollection() {
var message = [];
var receiverInput = document.getElementById("Receiver");
var classificationInput = document.getElementById("Classification");
var titleInput = document.getElementById("Title");
var senderInput = document.getElementById("Sender");
var dateInput = document.getElementById("Date");
var messageBox = document.getElementById("display");
function insert() {
message.push(receiverInput.value);
message.push(classificationInput.value);
message.push(titleInput.value);
message.push(senderInput.value);
message.push(dateInput.value);
clearAndShow();
}
function clearAndShow() {
receiverInput.value = "";
classificationInput.value = "";
titleInput.value = "";
senderInput.value = "";
dateInput.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "Sent Header " + message + "<br/>";
}
document.write(message)
}
classCollection()
""
".replace("
document.write ", "
return ")
result = js2py.eval_js(js)
print result
import webbrowser f = open('classInformation.html','w') records = """
<html>
<body>
<form>
<input id="Receiver" type="text" placeholder="Receiver" />
<input id="Classification" type="text" placeholder="Classification" />
<input id="Title" type="text" placeholder="Title" />
<input id="Sender" type="text" placeholder="Sender" />
<input id="Date" type="text" placeholder="Date" />
<input type="button" value="Save/Show" onclick="insert()" />
</form>
<div id="display"></div>
</body>
</html>""" f.write(records) f.close() webbrowser.open_new_tab('classInformation.html')

Listing sorted text in JavaScript

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>

cloneNode and total the value of all nodes (parent+childs). Javascript

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>

Dynamic Javascript Div

Got JS Fiddle to work
http://jsfiddle.net/pskjxofo/
Attached I have the following function, the purpose of which is to perform basic calculation. I also added a feature for adding more boxes for calculation. What I am currently stuck on is how to tell Javascript to make dynamic divs, and how to tell it to perform the same calculations for each line every time I click on Calculate. Assistance on this would be greatly appreciated. Thank you all in advance.
<div id="redo">
2 X
<input type="text" id="initial">
= <input type="text" id="solved">
<input type="submit" value="Calculate" onclick="calculait()">
<input type="submit" value="Add Another Box" onclick="addmore()">
</div>
<div id="main"></div>
<script type="text/javascript">
function calculait(){
var first = document.getElementById('initial');
var second = document.getElementById('solved');
second.value = first.value * 2;
}
function addmore(){
var bar = document.getElementById('main');
bar.innerHTML = bar.innerHTML + "<div id='redo'>2 X
<input type='text' id='initial'> = <input type='text' id='solved'>
<input type='submit' value='Calculate' onclick='calculait()'
<input type='submit' value='Add Another Box' onclick='addmore()";
}
</script>

Here is one of the many ways to do it. You could have this HTML structure:
<div id="main">
<div class="operation">
2 X <input type="text" class="initial"/>=
<input type="text" class="solved"/>
</div>
</div>
<input type="submit" value="Calculate" onclick="calculait()"/>
<input type="submit" value="Add Another Box" onclick="addmore()"/>
And this JS:
// Main container for all operations
var main = document.getElementById('main');
// Piece of HTML you'll be duplicating
var op = document.getElementsByClassName('operation')[0].outerHTML;
function calculait() {
// Get every operation div
var operations = document.getElementsByClassName('operation');
// For each of them, calculate
for(var i=0, l=operations.length; i<l; i++){
operations[i].getElementsByClassName('solved')[0].value =
parseFloat(operations[i].getElementsByClassName('initial')[0].value) * 2;
}
}
function addmore() {
main.insertAdjacentHTML('beforeend',op);
}
JS Fiddle Demo

If I understood correctly, I think this code will help.
First of all, change your ids for classes (IDs must be always unique in the page).
<input type="text" class="initial">
<input type="text" class="solved">
And in the JS, you use a for to iterate for this elements.
function calculait() {
var initial = document.getElementsByClassName('initial');
var solved = document.getElementsByClassName('solved');
for (var i = 0; i < initial.length; i++) {
solved[i].value = initial[i].value * 2;
}
}
function addmore() {
var bar = document.getElementById('main');
var html = "<div>2 X ";
html += "<input type='text' class='initial'> = ";
html += "<input type='text' class='solved'>";
html += "</div>";
bar.innerHTML = bar.innerHTML + html;
}
JSFiddle: http://jsfiddle.net/pskjxofo/2/
Give it a try and let me know if it helps!

When you write JavaScript use a debugger, your code didn't parse. You can find one in your browser by hitting F12.
Don't repeat yourself. A clean solution is to put html to duplicate into a template or similar and call a function to copy it.
Use input type=number for numbers.
<html>
<meta charset="utf-8">
<template id="calculate_template">
<form id="" class="calculate_form">
<input value="2" type="number" name="initial_1"> X
<input type="number" name="initial_2"> =
<input type="number" name="solved" disabled="disabled" >
</form>
</template>
<div id="main">
<button onclick="addmore();">Add Another Box</button>
<button onclick="calculate();">Calculate</button>
</div>
<script type="text/javascript">
function calculate(){
/*Calculates all*/
var forms = document.getElementsByClassName('calculate_form'),
i,
length = forms.length;
for(i = 0; i < length; i++){
console.log(forms[i]);
forms[i]['solved'].value = forms[i]['initial_1'].value * forms[i]['initial_2'].value;
}
}
function addmore(){
var main = document.getElementById('main');
main.insertAdjacentHTML("beforeend", document.getElementById('calculate_template').innerHTML);
}
addmore();
</script>
</html>
Demonstration

Here's a way of doing it:
var counter = 0;
function calculait(calculationId) {
var first = document.getElementById('initial' + calculationId);
var second = document.getElementById('solved' + calculationId);
second.value = first.value * 2;
}
function addmore() {
counter++;
var bar = document.getElementById('main');
var newDiv = document.createElement("div");
newDiv.id = "redo" + counter;
newDiv.innerHTML = "2 X <input type='text' id='initial" + counter + "'/> = <input type='text' id='solved" + counter + "'/><input type='submit' value='Calculate' onclick='calculait(" + counter + ")'/><input type='submit' value='Add Another Box' onclick='addmore(" + counter + ")'/>";
bar.appendChild(newDiv);
}
<div id="main"><div id="redo0">2 X <input type="text" id="initial0" /> = <input type="text" id="solved0" /><input type="button" value="Calculate" onclick="calculait(0)" /><input type="button" value="Add Another Box" onclick="addmore(0)" /></div>
</div>

HTML
<p id="operations"></p>
<p>
<input type="submit" value="Calculate" onclick="calc()" />
<input type="submit" value="Add operation" onclick="addOp()" />
</p>
Javascript
var id = 0, multiplier = 2;
var operations = document.getElementById('operations');
function addOp() {
++id;
var p = document.createElement("p");
var right = document.createElement("input");
right.id = 'right_' + id;
right.type = 'text';
var result = document.createElement('input');
result.id = 'result_' + id;
right.type = 'text';
p.innerHTML = multiplier + ' x ';
p.appendChild(right);
p.innerHTML += ' = ';
p.appendChild(result);
operations.appendChild(p);
}
function calc() {
for(var i = 1; i <= id; i++) {
var right = document.getElementById('right_' + i);
var result = document.getElementById('result_' + i);
result.value = multiplier * right.value;
}
}
addOp();
JSFiddle : http://jsfiddle.net/0Lcg0pyz/