letter replacement according to given rules - javascript

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

Related

Operations on strings. Split and replace in string

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>

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/

Specific value element input not read by

I dont know if its a browser bug or something else, because I have tested on Chrome and Firefox. I get same result. I tried to input value element only 1,10,100 that identified. This's my code.
HTML
<input id="items" type="text" placeholder="title" value="">
<input id="start" type="text" placeholder="start" value="">
<input id="end" type="text" placeholder="end" value="">
<input id="btn" type="submit" value="Generate"><br><br>
<div id="output" contenteditable="true"></div>
JavaScript
<script>
var btn = document.getElementById('btn')
var output = document.getElementById('output');
btn.addEventListener('click', function(){
var items = document.getElementById('items').value;
var i = document.getElementById('start').value;
var e = document.getElementById('end').value;
for(i; i<=e; i++){
output.innerHTML += items+'/'+i;
}
}, false);
</script>
It would not generate if start value input element is not 1,10,100. How can I make it to work? Start from 2,3,4,5,6,7,8,9?
You need to convert your values to Integers:
var i = parseInt( document.getElementById('start').value, 10 );
var e = parseInt( document.getElementById('end').value, 10 );

how to make sentence in input into ul list of words

I need to have whatever words are entered into this input to be spit out (onclick) in the div as an ordered list of one word on each line/element. 1. How do I tell the function to put the words into the list (I know I have to split them somehow, but I don't know how to do that) 2. How do I get the list into the div after that? Javascript only please. Thanks!
EDIT: started a function, now how do I make it put the splits into the ul and then put that in the div? Also is my var split to get the input of the input box right?
<script>
function function1()
{
var split= document.getElementById('theInput').value.split(' ')
var var1 = split[0];
var var2 = split [1];
var var3 = split [2];
}
</script>
<h1 id="header">The document header.</h1>
<img id="theImage" src="http://www.uiowa.edu/homepage/images/dome-wm-mobile.gif">
<p>Value: <input type="text" id="theInput" value="" size=10>
<input type="button" id="theButton" value="click me!" onclick="function1"></p>
<ul id="theList">
<li id="element1">Element 1
<li id="element2">Element 2
<li id="element3">Element 3
</ul>
<div id="theDiv"></div>
Hope this is what you are looking for
function splitText()
{
var textString = document.getElementById("splitText").value;
var stringArray = new Array();
stringArray = textString.split(" ");
var outputString = "<ul>";
for (i = 0; i < stringArray.length; i++) {
outputString += "<li>"+ stringArray[i] + "</li>";
}
outputString += "</ul>";
document.getElementById("output").innerHTML = outputString;
}
Here is the HTML code
<input id="splitText" type='text'/>
<div id='output' style='width:100px;height:100px;border: 1px solid' onclick='splitText()'>
Here you go
The markup:
<p>Input:<input type="text" id="theInput" value="" size=10>
<input type="button" id="button1" value="click" onclick="function1();"></p>
<ul id="theList">
</ul>
<div id="div1"></div>
JavaScript:
function function1() {
var words = document.getElementById("theInput").value.split(" ");
console.log(words.length);
for(var i = 0; i < words.length; ++i) {
var obj = document.createElement('li');
obj.id = "list"+i;
obj.innerHTML = words[i];
document.getElementById("theList").appendChild(obj);
}
}
A friendly tip: Consider working on your naming convention!

Categories

Resources