We Keep Coding

Can someone tell me why it doesn't show anything in console?? I want to get values of inputs. Do I have to use form?

<input type="text" name="" id="num1" placeholder="number1">
<input type="text" name="" id="num2" placeholder="number2">
<button type="submit" id="add">Add</button>
<script>
let value1 = document.getElementById('num1');
let value2 = document.getElementById('num2');
let submit = document.getElementById('add').addEventListener('onclick', getValue);
function getValue(){
let newValue1 = value1.value;
let newValue2 = value2.value;
console.log(newValue1 + newalue2);
}
</script>

addEventListener('onclick', getValue) should be updated to addEventListener('click', getValue)
let value1 = document.getElementById('num1');
let value2 = document.getElementById("num2");
document.getElementById("add").addEventListener('click', getValue);
function getValue() {
let newValue1 = value1.value;
let newValue2 = value2.value;
console.log(newValue1 + newValue2);
}
<input type="text" name="" id="num1" placeholder="number1">
<input type="text" name="" id="num2" placeholder="number2">
<button id="add">Add</button>
or use <button id="add" onclick="getValue()">Add</button> without addEventListener
let value1 = document.getElementById('num1');
let value2 = document.getElementById("num2");
function getValue() {
let newValue1 = value1.value;
let newValue2 = value2.value;
console.log(newValue1 + newValue2);
}
<input type="text" name="" id="num1" placeholder="number1">
<input type="text" name="" id="num2" placeholder="number2">
<button id="add" onclick="getValue()">Add</button>

How do i get a send button to only submit and write to its own inputField?

I'm a beginner and I'm now stuck trying to figure out two things for the below code:
How do I code so that each of the send buttons only connects to its own input field?
How do I code so that each new text input overwrites the previous?
My code:
<h1>Data input</h1>
<input type="text" placeholder="Last name" id="inputField1" name="lastName" required>
<input type="button" value="Send" id="myButton1">
<br>
<br>
<input type="text" placeholder="First name" id="inputField2" name="firstName" required>
<input type="button" value="Send" id="myButton2">
<br>
<br>
<p id="lastName">Last name</p>
<p id="firstName">First name</p>
<script>
var b1=document.getElementById("myButton1")
b1.addEventListener("click", handleClick);
var b2=document.getElementById("myButton2")
b2.addEventListener("click", handleClick);
function handleClick(){
var i=document.getElementById("inputField1");
var iValue=i.value;
var d=document.getElementById("lastName");
var oldText=d.innerText;
var newText=oldText+"\n"+iValue;
d.innerText=newText;
var k=document.getElementById("inputField2");
var kValue=k.value;
var f=document.getElementById("firstName");
var oldText=f.innerText;
var newText=oldText+"\n"+kValue;
f.innerText=newText;
}

Here is a solution that sends a 1 or a 2 to the handleClick function as a parameter depending on which button you click. It then gets the value of the input that matches the number, checks to make see if it is empty, and outputs the name to the correct paragraph if it isn't and an error message if it is. Let me know if you have any problems with it.
var b1 = document.getElementById("myButton1");
b1.addEventListener("click", () => handleClick("1"));
var b2 = document.getElementById("myButton2");
b2.addEventListener("click", () => handleClick("2"));
function handleClick(iNum){
var i = document.getElementById("inputField" + iNum);
var iValue = i.value;
var d = document.getElementById("name" + iNum);
if (iValue != "") {
var pText = (iNum == "1" ? "Last" : "First");
var newText = pText + " name: " + iValue;
d.textContent = newText;
} else {
d.textContent = "Please enter a name!";
}
}
<h1>Data input</h1>
<input type="text" placeholder="Last name" id="inputField1" name="lastName" required>
<input type="button" value="Send" id="myButton1">
<br>
<br>
<input type="text" placeholder="First name" id="inputField2" name="firstName" required>
<input type="button" value="Send" id="myButton2">
<br>
<br>
<p id="name1"></p>
<p id="name2"></p>

Not really sure what's going on here, but usually you have to access the input field via the event: event.target.value (just put event as a parameter)

Activate button after checking the password in input

I want to create a form in which I have input for password and button which must enable if the password from input is correct.
Here's the code I already have:
<form>
<label for="password"><input type="password" name="password" size="15" id="password" onkeyup="activateBtn()" /></label>
<input type="submit" id='delete' class='delete' disabled name="delete" value='Reset' onclick="resetFunc()" />
</form>
<script type="text/javascript">
function activateBtn() {
pass = document.getElementById('password').value;
if (pass = "1917"){
document.getElementById('password').onkeyup = function(){
document.getElementById('delete').disabled = false;
}
}}
</script>
<script type="text/javascript">
function resetFunc(){
countDownDate = new Date(); localStorage.setItem('startDate', countDownDate);
}
</script>
At this moment the button activates whatever is typed in input space.

You have used single equal to operator.
Please update the code with == instead of '='
function activateBtn() {
pass = document.getElementById('password').value;
console.log(pass);
document.getElementById('delete').disabled = pass !== '1917';
}
function resetFunc(){
countDownDate = new Date(); localStorage.setItem('startDate', countDownDate);
}
<form>
<label for="password"><input type="password" name="password" size="15" id="password" onkeyup="activateBtn()" /></label>
<input type="submit" id='delete' class='delete' disabled name="delete" value='Reset' onclick="resetFunc()" />
</form>

if (pass = "1917"){ should be if (pass == "1917"){

The code if (pass = "1917") isn't comparing, it's setting. (Although that would be truthy.)
const txtPassword = document.getElementById('password');
const btnDelete = document.getElementById('delete');
txtPassword.addEventListener('keyup', (e) => {
btnDelete.disabled = e.target.value !== '1917';
});
<form>
<label for="password">Password</label>
<input id="password" type="password">
<input id="delete" type="submit" value="Delete" disabled>
</form>

Calling function to work

I'm new to JavaScript and I need to use the string method all in one html page. I need to make sure user input the data, but I can't get my function calling to work. Any idea? I finished all of it, but just to make sure that one button submit can validate all string method function perfectly.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8"/>
<h1> Try 1</h1>
<p>Please enter all the field below.</p>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>String Methods</legend>
<p>Using concat()</p>
<input type="text" id="word1" size="25" placeholder="Enter first word/sentences."></br>
<input type="text" id="word2" size="25" placeholder="Enter second word/sentences."></br></br>
<p>Using substr()</p>
<input type="text" id="subtr" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using lastIndexOf()</p>
<input type="text" id="lastindex" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="srch" size="25" placeholder="Word that you want to search."></br></br>
<p>Using toLowerCase()</p>
<input type="text" id="lcase" size="35" placeholder="Please enter Uppercase word/sentences."></br></br>
<p>Using toUpperCase()</p>
<input type="text" id="ucase" size="35" placeholder="Please enter Lowercase word/sentences."></br></br>
<p>Using match()</p>
<input type="text" id="match" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="match1" size="25" placeholder="Words that you want to find match."></br></br>
<p>Using replace()</p>
<p id="phrase"><i>The voice in my head shouts out through the world like a breath.</i></p>
<input type="text" id="replce" size="35" placeholder="Word you want to change in sentence above."></br>
<input type="text" id="replce2" size="25" placeholder="Word you want to change with."></br></br>
<p>Using split()</p>
<input type="text" id="splt" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using charCodeAt()</p>
<input type="text" id="cca" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using slice()</p>
<input type="text" id="slce" size="25" placeholder="Please enter word/sentences."></br></br>
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything()">
</fieldset>
</form>
<div id="answers"></div>
</body>
</html>
This is my JavaScript code:
<script>
function validateEverything(){
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var lin = document.getElementById("lastindex").value;
var sea = document.getElementById("srch").value;
var lca = document.getElementById("lcase").value;
var uca = document.getElementById("ucase").value;
var mat = document.getElementById("match").value;
var ma1 = document.getElementById("match1").value;
var phr = document.getElementById("phrase").value;
var rep = document.getElementById("replce").value;
var re1 = document.getElementById("replce1").value;
var ph1 = document.getElementById("phrase1").value;
var spl = document.getElementById("splt").value;
var cha = document.getElementById("cca").value;
var slc = document.getElementById("slce").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
//lastindexof
var n = lin.lastIndexOf(sea);
//toLowerCase
var lc = lca.toLowerCase();
//toUpperCase
var uc = uca.toUpperCase();
//match
var mc = mat.match(ma1);
//replace
var rp = phr.replace(replce, replce1);
//split
var sp = sp1.split(" ")
//charCodeAt
var cc = cha.charCodeAt(0);
//slice
var sl = slc.slice(1, 5);
show();
}
function show(){
ans.innerHTML = answersHTML();
}
//answers
function answersHTML(){
var ans = document.getElementById("answers").innerHTML;
document.write(con);
document.write(subr);
document.write(n);
document.write(lc);
document.write(uc);
document.write(mc);
document.write(rp);
document.write(sp);
document.write(cc);
document.write(sl);
}
</script>

There are multiple issues in your snippet.In some case there is no DOM element present but still you are doing document.getElementById();
Also how answerHTML will know about con,sub,.... ? They are local to validateEverything function & you are not passing it to answerHTML function
You are using input type = "submit". You need to use event.preventDefault() to stop submission. You are not submitting anything. Rather use input type = "button"
There is also no use of show() function
Everytime you are using document.write, so it will delete anything which is previously written. Instead string concatenation and innerHTML will be fine.
Here is a working snippet with minimum code.
JS
function validateEverything(event){
event.preventDefault();
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
ans.innerHTML = con+" "+subr;
}
HTML
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything(event)">
JSFIDDLE

how to use javascript function in a form button?

I don't know anything about html and most especially javascript.. but we have this activity on how you'll call the javascript function that is located at the <head></head> of the html tag?
And what if there are several functions? Can I call it at the same time in one button? or should I create another function and put all the functions in there?
This is what our activity is all about... in a javascript button, when clicked, it must calculate all transactions? I have 5 functions, and one of them is called by a button tag, while the other 4 are inside of that function. I don't really know what to do... But when I clicked the button, nothing will happen. Btw, it's a Reservation form, so when the button is clicked, it must calculate all the inputs and shows a confirmation page/alert with the prices and such. Thanks guys!
This is my code of the form:
<form name="reserve" action="" id="reserve" method="post">
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name: </label>
<input type="text" name="firstname" value="firstname"
onfocus="if (this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="text" name="lastname" value="lastname"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;"/>
<br>
<label for="address">Address: </label>
<textarea name="address" cols="30" rows="3"></textarea>
<br>
<label for="city">City: </label>
<input type="text" name="city">
<label for="country">Country: </label>
<select name="country">
<option value=""></option>
<option value="PH">Philippines</option>
<option value="TH">Thailand</option>
<option value="VN">Vietnam</option>
<option value="MY">Malaysia</option>
<option value="ID">Indonesia</option>
<option value="SG">Singapore</option>
</select>
<br>
<label for="email">Email: </label>
<input type="email" name="email">
<label for="phone">Phone: </label>
<input type="tel" name="phone">
</fieldset>
<hr>
<fieldset>
<legend>Accomodation Request</legend>
<label for="checkin">Check-in: </label>
<input type="date" name="checkin">
<label for="checkout">Check-out: </label>
<input type="date" name="checkout">
<br>
<label for="roomtype">Room type: </label> <br>
<input type="checkbox" id="s" name="roomtype" value="superior">Superior |||||
<label for="sguest">No.of guests: </label>
<input type="text" id="supg" name="sguest" size="3"> <br>
<input type="checkbox" id="d" name="roomtype" value=deluxe">Deluxe |||||||
<label for="dguest">No.of guests: </label>
<input type="text" id="delg" name="dguest" size="3"> <br>
<input type="checkbox" id="p" name="roomtype" value="Premier">Premier |||||
<label for="pguest">No.of guests: </label>
<input type="text" id="premg" name="pguest" size="3"> <br>
</fieldset>
<br>
<hr>
<label for="adinfo">Additional Information:</label>
<textarea name="adinfo" cols="40" rows="10"></textarea>
<br><br>
<hr>
<input type="button" name="submit" onclick="formSubmit()"
class="submit" value="Reserve">
</form>
And this is javascript code:
function superiorroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var s = theForm.elements["s"]
var supg = theForm.elements["supg"]
var t=0;
If (s.checked==true)
{
roomprice=5400;
squantity=parseInt(squantity.value);
t=parseInt(t);
t= (roomprice*squantity)*supg;
}
return t;
}
function deluxeroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var d = theForm.elements["d"]
var delg = theForm.elements["delg"]
var u=0;
If (d.checked==true)
{
roomprice=7200;
dquantity=parseInt(dquantity.value);
u=parseInt(u);
u= (roomprice*dquantity)*delg;
}
return u;
}
function premiumroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var p = theForm.elements["p"]
var premg = theForm.elements["premg"]
var v=0;
If (p.checked==true)
{
roomprice=9800;
pquantity=parseInt(pquantity.value);
v=parseInt(v);
v= (roomprice*pquantity)*premg;
}
return u;
}
</script>
I hope you can help me guys!

Hi I have change your code a little check it
<input type="button" name="submit" onclick="return formSubmit()" class="submit" value="Reserve">

I changed your code as like this : Try This
Button
<input type="button" id="submit" name="submit" onclick="return formSubmit()" class="submit" value="Reserve">
Scripts
<script>
$("#submit").click(function () {
if ( document.getElementById("s").checked =checked)
superiorroom();
else if(document.getElementById("d").checked =checked)
deluxeroom();
else if(document.getElementById("p").checked =checked)
premiumroom();
});
</script>
<script>
function superiorroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var s = theForm.elements["s"]
var supg = theForm.elements["supg"]
var t=0;
If (s.checked==true)
{
roomprice=5400;
squantity=parseInt(squantity.value);
t=parseInt(t);
t= (roomprice*squantity)*supg;
}
return t;
}
function deluxeroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var d = theForm.elements["d"]
var delg = theForm.elements["delg"]
var u=0;
If (d.checked==true)
{
roomprice=7200;
dquantity=parseInt(dquantity.value);
u=parseInt(u);
u= (roomprice*dquantity)*delg;
}
return u;
}
function premiumroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var p = theForm.elements["p"]
var premg = theForm.elements["premg"]
var v=0;
If (p.checked==true)
{
roomprice=9800;
pquantity=parseInt(pquantity.value);
v=parseInt(v);
v= (roomprice*pquantity)*premg;
}
return u;
}
</script>