We Keep Coding

How to clear my input if button is clicked and at the same time make button unclickable if input is empty?

I want to create a simple chat but don't know how to clear my input if the button is clicked and at the same time make button unclickable if the input is empty. This is how I did but it doesn't work.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>

Everything you are doing is good,You just need to add btn.disabled =true; inside click event.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
btn.disabled =true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>
Better version
$("#text").on("input propertychange paste",function(){
debugger;
if($(this).val()===''){
$('#btn').attr('disabled',true);
}else{
$('#btn').removeAttr('disabled');
}
});
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').attr('disabled',true);
}
});
$('#btn').attr('disabled',true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>

Your logic is pretty much correct. The last thing you need to do is to disable the button when you clear the value of the input.
Note that I converted the example below to use jQuery entirely to save confusion.
var $btn = $('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$btn.prop('disabled', true);
}
});
$('#text').on('input', function() {
var $text = $(this);
$btn.prop('disabled', function() {
return $text.val().trim().length === 0;
});
}).trigger('input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>

First set your button to disabled like this:
<button class="button button1" id="btn" disabled>Send</button>
Then to disable the button when the <input> is empty put those functions in a <script> tag at the bottom of your document:
$('#text').keyup(function(){
if ($('#text').val() != '') {
$('#btn').prop('disabled', false);
}
});
$('#btn').click(function(){
$('#text').val('');
$('#btn').prop('disabled', true);
});
This should work for you.

Your code is correct, you just need to add$(this).attr("disabled",true); line at last of your button's onclick event.
Here's the JSFiddle Link
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
$(this).attr("disabled",true);
});

function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').prop('disabled', true);
}
else
{
$('#btn').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>

function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>

javascript calculator input background

Hi just out of educational purpose im trying to do a few things with my calculator i did, im trying to get the display to change color depending on result, this is the closest i've come, but it just shows red no matter what the result is, so what more do i need to add?
<script>
function checkNum() {
var x = document.kalk.disp.value;
if (x.match(/[a-zA-Z]+/)) {
kalk.disp.value=("Endast siffror!");
kalk.disp.style.background = "red";
} else {
kalk.disp.value = eval(x);
(eval.value===0)
kalk.disp.style.background = "green";
(eval.value>=1)
kalk.disp.style.background = "blue";
(eval.value<=-1)
kalk.disp.style.background = "red";
}
}
</script>
here's the html
<form name="kalk">
<input type="text" name="disp" >
<br>
<input type="button" value="7" OnClick="kalk.disp.value+='7'">
<input type="button" value="8" OnClick="kalk.disp.value+='8'">
<input type="button" value="9" OnClick="kalk.disp.value+='9'">
<input type="button" value="*" OnClick="kalk.disp.value+='*'">
<br>
<input type="button" value="4" OnClick="kalk.disp.value+='4'">
<input type="button" value="5" OnClick="kalk.disp.value+='5'">
<input type="button" value="6" OnClick="kalk.disp.value+='6'">
<input type="button" value="-" OnClick="kalk.disp.value+='-'">
<br>
<input type="button" value="1" OnClick="kalk.disp.value+='1'">
<input type="button" value="2" OnClick="kalk.disp.value+='2'">
<input type="button" value="3" OnClick="kalk.disp.value+='3'">
<input type="button" value="+" OnClick="kalk.disp.value+='+'">
<br>
<input type="button" value="C" OnClick="kalk.disp.value=''">
<input type="button" value="0" OnClick="kalk.disp.value+='0'">
<input type="button" value="." OnClick="kalk.disp.value+='.'">
<input type="button" value="=" OnClick="checkNum()" >
</form>
its basically this that i have added
(eval.value===0)
kalk.disp.style.background = "green";
(eval.value>=1)
kalk.disp.style.background = "blue";
(eval.value<=-1)
kalk.disp.style.background = "red";

You are using the eval wrong.
You need some if-statements or something like this:
function checkNum() {
var x = document.kalk.disp.value;
if (x.match(/[a-zA-Z]+/)) {
kalk.disp.value = ("Endast siffror!");
kalk.disp.style.background = "red";
} else {
var result = eval(x);
kalk.disp.value = result;
if (result > 0) {
kalk.disp.style.background = "blue";
} else if (result === 0) {
kalk.disp.style.background = "green";
} else {
kalk.disp.style.background = "red";
}
}
}
fiddle

function checkNum() {
var x = document.kalk.disp.value;
if (x.match(/[a-zA-Z]+/)) {
kalk.disp.value = ("Endast siffror!");
kalk.disp.style.background = "red";
} else {
var result = eval(x);
kalk.disp.value = result;
if (result > 0) {
kalk.disp.style.background = "blue";
} else if (result === 0) {
kalk.disp.style.background = "green";
} else {
kalk.disp.style.background = "red";
}
}

Getting divs to close if another one opens with Javascript

Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>

Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>

You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>

Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.

Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>

Registerscript (HTML and Javascript)

I'm working on a register script, but i'm stuck. I have an oppertunity to the user pay or free memberships. And when they choose "pay" the pay column becomes visible but if i after that choose "free" i see both the free and the pay column. But i only want one column be seen not both at the same time
Javascript
<script type="text/javascript">
function betal(value) {
if (value == 'show') { document.getElementById('betalversion').style.display = 'block'; }
else { document.getElementById('betalversion').style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') { document.getElementById('gratisversion').style.display = 'block'; }
else { document.getElementById('gratisversion').style.display = 'none'; }
}
</script>
HTML
<div class="FormGroup">
<h2 class="description">Vad skulle du vilja ha?</h2>
<label class="choice">
<input id="gratisVersion" name="field_Payment" type="radio" value="Gratis" class="required" onclick="gratis('show');">
Gratis Version</label>
<br />
<label class="choice">
<input id="betalVersion" name="field_Payment" type="radio" value="Betal" class="required" onclick="betal('show');">
Betal Version</label>
<br />
</div>
<div class="FormGroup" style="display: none" id="betalversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<div class="explanation">Här är nåt</div>
<input type="text" name="paypal_address" id="Text1" size="40">
</div>
<div class="FormGroup" style="display: none" id="gratisversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<label for="name">Användarnamn</label><input type="text" name="name" id="name"/>
<br />
<label for="pass">Lösenord</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" />
<br />
<p>

<script type="text/javascript">
function betal(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'block';
document.getElementById('gratisversion').style.display = 'none';
}
else {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
else {
document.getElementById('gratisversion').style.display = 'none';
document.getElementById('betalversion').style.display = 'block';
}
}
</script>

<script type="text/javascript">
var beta=document.getElementById('betalversion');
var grati=document.getElementById('gratisversion');
function betal(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') {
beta.style.display = 'block'; }
else { beta.style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') { grati.style.display = 'block'; }
else { grati.style.display = 'none'; }
}
</script>
hide both the divs on toggle

Getting the value of a textbox then parsing it

I am creating a simple calculator in javascript but how come each time I added numbers it only adds the the first half of the 2nd number? for example
first input: 55
second input: 55
then it will give me an answer of 60.
it only adds the lower half of the 2nd input.
here's my code
var fnum;
var secondNum;
var operation;
function msg(val){
document.getElementById("fnumtext").value += val;
fnum = val;
}
function showOperation(oper){
document.getElementById("fnumtext").value ="";
document.getElementById("operation").value = oper;
operation = oper;
}
function equal(){
secondNum = document.getElementById("fnumtext").value;
alert(secondNum+operation);
if(document.getElementById("operation").value == "+"){
var x = parseInt(fnum)+parseInt(secondNum);
alert(x);
}else if(document.getElementById("operation").value == "-"){
var x = parseInt(fnum)-parseInt(secondNum);
alert(x);
}else if(document.getElementById("operation").value == "*"){
var x = parseInt(fnum)*parseInt(secondNum);
alert(x);
}else if(document.getElementById("operation").value == "/"){
var x = parseInt(fnum)/parseInt(secondNum);
alert(x);
}else{
alert("choose some Operation");
}
}
my HTML
body>
<input id = "fnumtext"type="text" name="firstnum" /><br />
<input id = "operation" type="text" name="secondnum" /><br />
<input type="button" value="1" onclick="msg('1')" />
<input type="button" value="2" onclick="msg('2')" />
<input type="button" value="3" onclick="msg('3')" /></br>
<input type="button" value="4" onclick="msg('4')" />
<input type="button" value="5" onclick="msg('5')" />
<input type="button" value="6" onclick="msg('6')" /><br/>
<input type="button" value="7" onclick="msg('7')" />
<input type="button" value="8" onclick="msg('8')" />
<input type="button" value="9" onclick="msg('9')" /></br>
<input type="button" value="0" onclick="msg('0')" /></br>
<input type="button" value="+" onclick="showOperation('+')" />
<input type="button" value="*" onclick="showOperation('*')" />
<input type="button" value="/" onclick="showOperation('/')" />
<input type="button" value="-" onclick="showOperation('-')" />
<input type="button" value="DO ZEH OPERATION!" onclick="equal()" />
</body>

In msg, you set the value of fnum rather than appending it. Try changing that to +=.
function msg(val){
document.getElementById("fnumtext").value += val;
fnum += val; // changed this line
}

First you need to keep track whether this is a first operand you're entering now or the second one.
Second, you must add current digit's value to the already accumulated values, not override them.
var fnum;
var secondNum;
var operation;
var firstOperand = true;
function msg(val) {
document.getElementById("fnumtext").value += val;
if (firstOperand) {
fnum = document.getElementById("fnumtext").value;
}
}
function showOperation(oper)
{
firstOperand = false;
document.getElementById("fnumtext").value = "";
document.getElementById("operation").value = oper;
operation = oper;
}
function equal() {
secondNum = document.getElementById("fnumtext").value;
alert(secondNum+operation);
if (document.getElementById("operation").value == "+") {
var x = parseInt(fnum) + parseInt(secondNum);
alert(x);
} else if (document.getElementById("operation").value == "-") {
var x = parseInt(fnum) - parseInt(secondNum);
alert(x);
} else if (document.getElementById("operation").value == "*") {
var x = parseInt(fnum) * parseInt(secondNum);
alert(x);
} else if (document.getElementById("operation").value == "/") {
var x = parseInt(fnum) / parseInt(secondNum);
alert(x);
} else {
alert("choose some Operation");
}
firstOperand = true;
document.getElementById("fnumtext").value = "";
}