We Keep Coding

how to show add button in front of field instead at the top of the first field

this is my code but add button is coming of first field but i want that whenever a new input field came the add button shift next to the new input field.
function add(){
var new_chq_no = parseInt($('#total_chq').val())+1;
var new_input="<input type='text' id='new_"+new_chq_no+"'>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no)
}
function remove(){
var last_chq_no = $('#total_chq').val();
if(last_chq_no>1){
$('#new_'+last_chq_no).remove();
$('#total_chq').val(last_chq_no-1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button onclick="add()">Add</button>
<button onclick="remove()">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">

Try This
var new_id = 0;
function add() {
new_id += 1;
var inp_div = document.getElementById("inputs");
var new_inp = document.createElement("input");
new_inp.setAttribute("id", new_id);
inp_div.appendChild(new_inp);
}
function remove() {
if (new_id >= 1) {
document.getElementById(new_id).remove();
new_id -= 1;
}
}
<div id="inputs">
<input type="text">
</div>
<button onclick="add()">Add</button>
<button onclick="remove()">remove</button>
<div id="new_chq"></div>

Try wrapping the button and the input in a div with css attribute display: inline-block

Clear content with button

I am able to save user data from input field into paragraph, but I want to delete the contents of the paragraph with a click of button.
HTML:
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clear()">clear</button>
JAVASCRIPT:
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += '<br>' + Name;
}
function clear(){
document.getElementById('result').innerHTML = "";
}

I think the problem here is the clear() function name, it's not a reserved word, but it will invoke document.clear in the first place, so try any other name for your function:
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += '<br>' + Name;
}
function clearContent(){
document.getElementById('result').innerHTML = '';
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clearContent()">clear</button>
Update
To remove the inserted data one by one, you need to create an event listener for each created element, a simple implementation would be (remove element on click):
function fn() {
var Name = document.getElementById('name').value;
var paragraph = document.createElement('p');
paragraph.innerHTML = Name + ' (X)';
paragraph.onclick = function(el) {
el.target.remove();
return false;
};
document.getElementById('result').appendChild(paragraph);
}
function clearContent(){
document.getElementById('result').innerHTML = '';
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clearContent()">clear</button>

It seems clear will call document.clear. Change the function name to something else
let dom = document.getElementById('result');
function fn() {
var Name = document.getElementById('name').value;
dom.innerHTML += '<br>' + Name;
}
function clearVal() {
dom.innerHTML = "";
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clearVal()">clear</button>

clear method of the window object will be called. Therefore, you are not able to see the changes. Rename your function except clear
In order to reset the input, you can use document.getElementById('name').reset().
var randkey=0;
function fn(){
var Name = document.getElementById('name').value;
randKey = Math.floor(Math.random()*999);
document.getElementById('result').innerHTML += '<div id='+randKey+'>' + Name +'<br><button onclick=cleardd('+randKey+')>clear</button></div>';
}
function cleardd(randKey){
document.getElementById(randKey).remove();
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div id="result">
</div>

Please use any name other than clear. I think it is a keyword.
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += '<br>' + Name;
}
function clearText(){
document.getElementById('result').innerHTML = '';
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clearText()">clear</button>

How to make buttons that increment and decrement a value when clicked?

I am new to programming. Every time I run this code, nothing happens. Can you please tell me why this is?
<body>
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<script type="text/javascript">
var x = 0
document.write(x)
function button1() {
document.write(x++)
}
function button2(){
document.write(x--)
}
</script>
</body>

The problem is that you put ++ and -- after the variable, meaning that it will increment/decrement the variable after printing it. Try putting it before the variable, like below.
Also, as mentioned, you have some trouble with document.write(). Consider the following documentation from the W3Schools page:
The write() method writes HTML expressions or JavaScript code to a
document.
The write() method is mostly used for testing. If it is used after an
HTML document is fully loaded, it will delete all existing HTML.
Thus, document.write() will remove all your existing content as soon as you click on a button. If you want to write to the document, use an element's .innerHTML like this:
var x = 0;
document.getElementById('output-area').innerHTML = x;
function button1() {
document.getElementById('output-area').innerHTML = ++x;
}
function button2() {
document.getElementById('output-area').innerHTML = --x;
}
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<span id="output-area"></span>

Why don't you change your code a bit? Instead of document.write(x++) and document.write(x--) use document.write(++x) and document.write(--x).

The document.write is the problem. It only works before the browser is done loading the page completely. After that, document.write doesn't work. It just deletes all of the existing page contents.
Your first document.write is executed before you the page has loaded completely. This is why you should see the 0 next to the two buttons.
Then however, the page has loaded. Clicking on a button causes the event handler to be executed, so document.write will be called, which doesn't work at that point, because the page already has loaded completely.
document.write shouldn't be used anymore. There are many modern ways of updating the DOM. In this case, it would create a <span> element and update it's content using textContent.
Moreover, use addEventListener instead of inline event listeners:
var x = 0;
var span = document.querySelector('span'); // find the <span> element in the DOM
var increment = document.getElementById('increment'); // find the element with the ID 'increment'
var decrement = document.getElementById('decrement'); // find the element with the ID 'decrement'
increment.addEventListener('click', function () {
// this function is executed whenever the user clicks the increment button
span.textContent = x++;
});
decrement.addEventListener('click', function () {
// this function is executed whenever the user clicks the decrement button
span.textContent = x--;
});
<button id="increment">increment</button>
<button id="decrement">decrement</button>
<span>0</span>
As others have mentioned, the first x++ won't have a visible effect, because the value of x is incremented after the content of the <span> is updated. But that wasn't not your original problem.

document write will delete full html:
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
As in w3schools
try this instead
<body>
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<div id="value"></div>
<script type="text/javascript">
var x=0
var element = document.getElementById("value");
element.innerHTML = x;
function button1(){
element.innerHTML = ++x;
}
function button2(){
element.innerHTML = --x;
}
</script>
I changed the x-- and x++ to ++x and --x so the changes are immediatly. With this change your code would have worked aswell. showing 1 or -1.

HTML code for UI
<div class="card">
<div class="card-body">
<h5 class="card-title">How many guests can stay?</h5>
<div class="row">
<ul class="guestCounter">
<li data-btn-type="increment"><span class="romoveBtn"><i class="fa fa-plus"></i></span> </li>
<li class="counterText"><input type="text" name="guestCount" id="btnGuestCount" value="1" disabled /> </li>
<li data-btn-type="decrement"><span class="romoveBtn"><i class="fa fa-minus"></i></span></li>
</ul>
</div>
Java Script:
// set event for guest counter
$(".guestCounter li").on("click", function (element) {
var operationType = $(this).attr("data-btn-type");
//console.log(operationType);
var oldValue = $(this).parent().find("input").val();
//console.log(oldValue);
let newVal;
if (operationType == "increment") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$(this).parent().find("input").val(newVal);
});

var x = 1;
document.getElementById('output-area').innerHTML = x;
function button1() {
document.getElementById('output-area').innerHTML = ++x;
}
function button2() {
if(x <= 0 ){
alert(' minimum value 0 // By Khaydarov Marufjon marvell_it academy uzb ')
return false ;
}
document.getElementById('output-area').innerHTML = --x;
}
input{
width: 70px;
background-color: transparent;
padding: 20px;
text-align: center;
}
button{
padding: 20px;
}
<input type='button' value="plus" onclick="button1()" />
<span id="output-area"></span>
<input type='button' value="minus" onclick="button2()" />

This question is very common. I have developed a solution with Bootstrap and pure JavaScript in another very similar thread here.
There is autoincrement input on keeping button pressed down.
Use ontouchstart and ontouchend instead than onmousedown and onmouseup method for mobile. To make it work for both mobile and desktop browser without headache use onpointerdown, onpointerup, onpointerleave
https://stackoverflow.com/a/70957862/13795525
function imposeMinMax(el) {
if (el.value != '') {
if (parseInt(el.value) < parseInt(el.min)) {
el.value = el.min;
}
if (parseInt(el.value) > parseInt(el.max)) {
el.value = el.max;
}
}
}
var index = 0;
var interval;
var timeout;
var stopFlag=false;
function clearAll(){
clearTimeout(timeout);
clearInterval(interval);
}
function modIn(el) {
var inId = el.id;
if (inId.charAt(0) == 'p') {
var targetId = inId.charAt(2);
var maxValue = Number(document.getElementById(targetId).max);
var actValue = Number(document.getElementById(targetId).value);
index = actValue;
if(actValue < maxValue){
stopFlag=false;
document.getElementById(targetId).value++;
}else{
stopFlag=true;
}
timeout = setTimeout(function(){
interval = setInterval(function(){
if(index+1 >= maxValue){
index=0;
stopFlag=true;
}
if(stopFlag==false){
document.getElementById(targetId).value++;
}
index++;
}, 100);
}, 500);
imposeMinMax(document.getElementById(targetId));
}
if (inId.charAt(0) == 'm') {
var targetId = inId.charAt(2);
var minValue = Number(document.getElementById(targetId).min);
var actValue = Number(document.getElementById(targetId).value);
index = actValue;
if(actValue > minValue){
stopFlag=false;
document.getElementById(targetId).value--;
}else{
stopFlag=true;
}
timeout = setTimeout(function(){
interval = setInterval(function(){
if(index-1 <= minValue){
index=0;
stopFlag=true;
}
if(stopFlag==false){
document.getElementById(targetId).value--;
}
index--;
}, 100);
}, 500);
imposeMinMax(document.getElementById(targetId));
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button example</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<button type='button' class='btn btn-danger btn-sm ' id='mbA' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>-</button>
<input type='number' id='A' onchange='imposeMinMax(this)' value='200' max='350' min='150' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbA' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>+</button>
<button type='button' class='btn btn-danger btn-sm signBut' id='mbB' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>-</button>
<input type='number' id='B' onchange='imposeMinMax(this)' value='250' max='450' min='150' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbB' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>+</button> 
<button type='button' class='btn btn-danger btn-sm signBut' id='mbC' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>-</button>
<input type='number' id='C' onchange='imposeMinMax(this)' value='3' max='10' min='1' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbC' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>+</button>
</body>
</html>

Javascript - how do i add cost?

How would i add a cost for the check boxes. When i add a onClick it said myFunction was not defined. I Don't know what i am doing. I was trying to make a check with the second function so if it was checked it would add the costs together and make a subtotal but i cant get it to work or find a way to get the costs to be a value in the check boxes
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep" > Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="ch" >Cheese + 4$<br>
<br>
<input type="button" onClick="myFunction()" value="Send order"><br>
<input type="button" onClick="cost()" value="Get cost" > <br>
<input type="text" id="order" size="50">
</form>
<script type="text/javascript">
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) { // this shows the you ordered the pizza with blank topping
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var x = document.getElementById(pep).checked; // this is the failed check and i dont know how to fix it and get it to add a cost
document.getElementById("demo").innerhtml = x;
}
</script>
<p id="demo"></p>
</body>
</html>

answer that https://stackoverflow.com/users/7488236/manish-poduval got
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep">Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="che">Cheese + 4$<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<input type="button" onclick="cost()" value="Get cost">
<br><br>
<input type="text" id="order" size="50">
</form>
<script>
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) {
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var pep = 5;
var che = 4;
var pizza = 13;
var total = 0;
if (document.getElementById("pep").checked === true) {
total += pep;
}
if (document.getElementById("che").checked === true) {
total += che;
}
document.getElementById("order").value = "The cost is : " + total;
}
</script>
</body>
</html>

document.getElementById("pep").checked;
You have not written this line properly. after this check the value of x if it is true then add the value 5$ to 13$ and sum it up the cost and display it on a text field.
Let me know if it works or not.

I'm trying to add input text into a list but doesn't work

So I'm trying to put input text into a list but doesn't work. And empty list option doesn't work either. Here is my code:
http://pastebin.com/knL8dL5y
Here is the task I was given:
Create a " numeric keypad " by putting out 10 buttons with text 0,1,2,3 etc . Make as
a text field where you can enter numbers as 3604 by pressing the buttons. Every time you
press a button , should therefore number that is on the button is added to the text box.
Somehow it doesn't let me add the numbers to another list and it won't empty the list either.

This is working,check it out:
<script>
function add(num) {
var calc = document.getElementById("text1");
calc.value += num;
}
addList=function() {
var name = document.getElementById("text1").value;
alert(name);
document.getElementById("liste").innerHTML = document.getElementById("liste").innerHTML + "<li>" + name + "</li>";
//document.getElementById("liste").innerHTML = "";
}
var emptyList=function() {
document.getElementById("text1").value = "";
}
kappa=function() {
document.getElementById("btnAddList").onclick = addList;
document.getElementById("btnEmptyList").onclick = emptyList;
}
window.onload = kappa //When the site is fully loaded
</script>
Now the html:
List: <input type="text" id="text1" />
<button type="button" id="btnAddList">Add list</button>
<button type="button" id="btnEmptyList">Empty list</button>
<br/>
<button id="btnAdd1" onclick="add(1)">1</button>
<button id="btnAdd2" onclick="add(2)">2</button>
<button id="btnAdd3" onclick="add(3)">3</button>
<button id="btnAdd4" onclick="add(4)">4</button>
<button id="btnAdd5" onclick="add(5)">5</button>
<button id="btnAdd6" onclick="add(6)">6</button>
<button id="btnAdd7" onclick="add(7)">7</button>
<button id="btnAdd8" onclick="add(8)">8</button>
<button id="btnAdd9" onclick="add(9)">9</button>
<button id="btnAdd0" onclick="add(0)">0</button>
<ol id="liste">