Develop Reference

How do I make a calc with logs information under?

I have build calc and I wanted to add a logs for calculator but my script is not working. Someone see
where is mistake? I am learning for a few days and decided to make a project but after many hours of looking at code, browsing everything in internet I decided to ask you. I know there are probably many easier projects for a beginner, but I don't want to abandon a project before finishing.
Here is js script.
funtion changeContent() {
var x = document.getElementById('textarea');
var liczba11 = document.getElementById('liczba1');
var liczbaa2 = document.getElementById('liczba2');
x.value = x.value + liczba11.value + liczbaa2.value + '\r\n';
}
<form action="">
<fieldset>
<legend>Sumowanie dwóch liczb - wprowadź dane</legend>
<p>Liczba1 <input type="text" name="liczba1" id="liczba1" /></p>
<p>Liczba2 <input type="text" name="liczba2" id="liczba2" /></p>
<p>Wynik : <input type="text" name="wynik" readonly="readonly" /></p>
<button
onclick="this.form.elements['wynik'].value = parseFloat(this.form.elements['liczba1'].value) + parseFloat(this.form.elements['liczba2'].value); return false"
>
Oblicz
</button>
</fieldset>
</form>
<form action="">
<div>
<textarea
name="uwagi"
id="textarea"
cols="30"
rows="3"
value="text"
disabled="disabled"
></textarea>
</div>
</form>
<button onclick="changeContent()">Click to change</button>

It's really difficult to implement, calculation in programming language. There's so mutch anything to handle, priority, divizion by zero. With the power of programming language there's eval function in javascript it can be easy to do.
const btn = document.querySelector('button')
const str = document.querySelector('#liczba1')
const result = document.querySelector('#r')
btn.addEventListener('click', function(e){
e.preventDefault()
if ( /^[0-9\*\/\-\+\(\)]+$/.test(str.value))
{
result.innerText = eval(str.value) // Be awaire of using eval function
console.log(eval(str.value))
} else
result.innerText = 'Error, type missmatch'
})
<fieldset>
<legend>String of calculation</legend>
<p>Example: 3+4 OR 4*3 OR some complicate 7895*265+(423-(4/65+3))</p>
<p><input type="text" name="liczba1" id="liczba1"/></p>
<p>Result <strong id="r"></strong> </p>
<button>
Result
</button>
</fieldset>
IMPORTANT
Check intentionnally using eval function.

Instead of using the onclick handler to hold the code, you can run a function from it.
You also misspelled function.
I added the logging code to the runCalc function so that it all happens at the same time, no extra button needed.
function runCalc(){
liczba11 = document.getElementById('liczba1');
liczbaa2 = document.getElementById('liczba2');
wynik = document.getElementById('wynik');
logs = document.getElementById('textarea');
wynik.value = parseFloat(liczba11.value) + parseFloat(liczbaa2.value);
logs.value += parseFloat(liczba11.value) + " + " + parseFloat(liczbaa2.value) + " = " + wynik.value + "\r\n";
}
<form action="">
<fieldset>
<legend>Sumowanie dwóch liczb - wprowadź dane</legend>
<p>Liczba1 <input type="text" name="liczba1" id="liczba1" /></p>
<p>Liczba2 <input type="text" name="liczba2" id="liczba2" /></p>
<p>Wynik : <input type="text" name="wynik" id="wynik" readonly="readonly" /></p>
<button type="button"
onclick="runCalc()"
>
Oblicz
</button>
</fieldset>
</form>
<form action="">
<div>
<textarea
name="uwagi"
id="textarea"
cols="30"
rows="3"
value="text"
disabled="disabled"
></textarea>
</div>
</form>

html form to javascript and back to html

Please let me know why this doesn't work and how I can achieve this as simple as possible. my professor wants the simplicity to reflect 15 minutes or work. I just don't grasp it though. Thanks in advance!
<script language="JavaScript">
var obj = {
name = "",
address = "",
ccNumber = "",
}
function printObj() {
document.getElementById("display").innerHTML = obj.name + " " + obj.address + " " + obj.ccNumber;
}
function storeInput(user_input1, user_input2, user_input3) {
name = document.getElementById("myObject").form.user_input1;
address = document.getElementById("myObject").form.user_input2;
ccNumber = document.getElementById("myObject").form.user_input3;
}
</script>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
</form>
<form>
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
</form>
<form>
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="obj.storeInput(user_input1, user_input2, user_input3);obj.showInput()"><br />
<p id='display'></p>

Ok! You need your storeInput() to reference the declared object. Currently with your code as it is storeInput() is an independent function but for you event handler (onclick) to work. You need to redefine the storeInput() as
obj.storeInput() = function(user_input1, user_input2, user_input3) {.....};

This will get the job done. It will not store the values, but will display them.
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="aFunction();"><br />
<p id='display'></p>
<script>
function aFunction(){
var x = document.querySelector('#user_input1').value; // gets value of user_input1 field
var y = document.querySelector('#user_input2').value; // gets value of user_input2 field
var z = document.querySelector('#user_input3').value; // gets value of user_input3 field
document.querySelector('#display').innerHTML = x + ' ' + y + ' ' + z; // puts the values in <p> with id of 'display'
}
</script>
</body>
</html>
Hope this helps you understand.

How do I make each new output appear in a new box?

I would like for every different item inputted to be outputted in a new box.
<!DOCTYPE html>
<html>
<body>
Form to get the input
<form id="form1">
<input name="item" type="text" size="20">
</form>
Box that should be duplicated to hold the new input.
<div class="box">
<p class="output"></p>
<div>
<button onclick="outputItem()">Add</button>
javascript:
<script>
function outputItem() {
var x = document.getElementById("form1");
item = x.elements.namedItem("item").value;
document.getElementById("output").innerHTML=item;
</script>
</body>
</html>

I am not sure if this is even close to what you want, but give this a try:
function outputItem() {
var els = document.querySelectorAll("#form1 input");
var box = document.querySelector('.box');
box.innerHTML = '';
els.forEach(
function(el) {
var newEl = document.createElement('div');
newEl.innerHTML = el.value;
box.appendChild(newEl);
}
);
}
<form id="form1">
<input name="item" type="text" size="20" value="item"><br/>
<input name="eggs" type="text" size="20" value="eggs"><br/>
<input name="milk" type="text" size="20" value="milk"><br/>
<input name="grains" type="text" size="20" value="grains"><br/>
<input name="legumes" type="text" size="20" value="legumes"><br/>
</form>
<button onclick="outputItem()">Add</button>
<hr/>
<div class="box"></div>
This creates a new <div> for every input and copies the .value from the <input> into the new <div>. Then it adds the <div> into the output area.

Keeping value of search box Javascript/HTML

I made a tool which make my work a little easier by inserting a value into a url in a new window on multiple sites. It was working quite well but now I am having the problem of the search value being cleared onsubmit.
Javascript:
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
if(document.search.website.checked) {
var website = open( "https://www.website.com/" + req, "website");
}
//--></script>
HTML:
<form name="search">
Please select the networks you want to use.
<p>
</center>
</p>
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
So far, return false had been working to keep the value of the input in the form="text" input name="query" but now it seems to clear it and reload the page. I'm not sure what changed.

You have errors in your code opening and closing the tags.
Try this code. It works:
<html>
<head></head>
<body>
Please select the networks you want to use
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
</form>
</div>
</div>
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
var checkbox = document.getElementsByName("website");
if(checkbox[0].checked) {
var website = open("https://www.website.com/" + req,
"website");
}
}
</script>
</body>
</html>
Hope it helps.

I fixed it. It was not the tags. I had only pasted a small amount of the total code to make it easier to read but I failed at making it easier to read. The problem was undefined inputs. I have been adding many if statements but didn't have a corrosponding checkbox. Oops.
Thanks for the help.

Submit form not connected to multiple fields

I have a form on a webpage that I want a user to be able to fill out, hit submit, and it displays something like "User: [name] has a [event] event at [location] with details [description]" in a comment section below. So multiple entries will just load under each other. Right now when I hit submit, it will only submit the description text and nothing else. My function getInfo() should be displaying multiple values but is not. How can I remedy this. Full code linked below
https://github.com/tayrembos/Nav/blob/master/back.html
<script type="text/javascript">
function getInfo() {
text = name.value;
text = words.value;
document.getElementById("para").innerHTML += '<p>'+ text
document.getElementById("words").value = "Enter comment"
document.getElementById('name').value = "Enter name"
}
</script>
<form method="POST" name='myform'>
<p>Enter your name:
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='words' rows="10" cols="20">Enter comment</textarea>
<input type="button" onclick="getInfo()" value="Submit!" /> <br>
<p id="para"></p>

i use append from jquery(vote if it really solves your problem).
function myFunction() {
var x = document.getElementById("product");
var txt = "";
var all = {};
var i;
for (i = 0; i<x.length-1; i++) {
//txt = txt + x.elements[i].value + "<br>";
all[x.elements[i].name]= x.elements[i].value;
}
$("p").append(JSON.stringify(all, null, 2));
//var myObj = { "name":"John", "age":31, "city":"New York" };
//document.getElementById("demothree").innerHTML = myObj;
//var myJSON = JSON.stringify(all);
//window.location = "server.php?x=" + myJSON;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="product">
Expire: <input type="text" name="pexpire" value="3:45"><br>
Old Price: <input type="text" name="poldprice" value="30"><br>
Price: <input type="text" name="pprice" value="28"><br>
Category: <input type="text" name="pcategory" value="Ενδύματα"><br>
Variaty: <input type="text" name="pvariaty" value="Τζιν"><br>
City: <input type="text" name="pcity" value="Δράμα"><br>
Store: <input type="text" name="pstore" value="Groove"><br>
Picture: <input type="text" name="ppicture" value="aaa"><br>
</form>
<button onclick="myFunction()">Submit</button>
<p id="list"></p>