Change input with an input? - javascript

Is it possible to change the color and text of an input by clicking on a different input?.
In short it is: when clicking ferrari by css raises change the background-color to red What I would like was to also change the word Available to Unavailable. is it possible to do this?
here I make the change of the color onclick.
input{
display: none
}
input:checked+label>.choices {
background-color: red !important;
}
In the other block I have the following Script
<script language="JavaScript" type="text/javascript">
function insereInput() {
if ( document.getElementById('btn').innerHTML == 'Disponivel' ) {
document.getElementById('btn').innerHTML = '<marquee>Em Serviço</marquee>';
document.getElementById('inputprogram').innerHTML = '<marquee>Em Serviço</marquee>';
} else {
document.getElementById('btn').innerHTML = 'Disponivel';
document.getElementById('btn').innerHTML = 'Disponivel';
}
}
</script>
which changes the status by clicking between "Available" and "In service".
My short code is:
<td>
<div class="btn-wrap">
<input type="checkbox" id="veiculos1" /><label for="veiculos1"><div class="choices">FERRARI</div></label>
<input type="checkbox" id="filtro" /><label for="filtro1"><div class="choices3"><span id="btn" onclick="insereInput()">Disponivel</span></div></label>
</div>
I really appreciate your help.

<script>
function mytest() {
var x = document.getElementById("btn");
if (x.innerHTML === "Disponivel") {
x.innerHTML = "Em Serviço";
} else {
x.innerHTML = "Disponivel";
}
}
</script>

Related

How to change background color of an input field with conditionals in JavaScript

I tried to change the background color of the input field with an if statement. I dont know why it isnt working. What can I do to get it working?
function increment() {
var textbox = document.
getElementById("inc");
textbox.value++;
}
var inputfield = document.getElementById("inc")
// trying to change bg color of inputfield if number higher or lower -- doesnt work yet
if (inputfield.value > 3) {
inputfield.style.backgroundColor = "#AA0000";
}
<div class = wrapper>
<button onclick="increment()">Click to + 1!</button>
<input class="inputfield" id="inc" type="text" value="0" />
</div>
While your javascript function increment() gets executed each click of the button, the rest of your javascript code gets only executed once after the document has been loaded. Initially input field #inc value is 0 and will not change color as it never becomes > 3 this way.
In your Javascript:
you only have to get the reference to input element #inc once (const textBox) and use that in your increment function. In the snippet I defined the constant textBox as global because the reference does not change, just its .value. Consequently method .getElementById does not have to be executed each click of the button.
After the button has been clicked, increment textBox.value and change the color when the value > 3.
Snippet
// Get a reference to the textbox
const textbox = document.getElementById("inc");
function increment() {
textbox.value++; // increment its value
if (textbox.value > 3) {
// change its color
textbox.style.backgroundColor = "#AA0000";
}
}
<div class=wrapper>
<button onclick="increment()">Click to + 1!</button>
<input class="inputfield" id="inc" type="text" value="0" />
</div>
Check this out.
const inputfield = document.getElementById("change_color_example")
inputfield.addEventListener("keyup", function() {
if (this.value > 3) {
this.classList.add("active-math")
} else {
this.classList.remove("active-math")
}
if (this.value.length > 3) {
this.classList.add("active-length")
} else {
this.classList.remove("active-length")
}
})
.example-input {
color: #333333;
background-color: #ffffff;
border: 1px solid #000000;
transition: all 300ms linear;
}
.example-input.active-math {
color: #f8f8f8;
background-color: #AA0000;
}
.example-input.active-length {
color: blue;
background-color: bisque;
}
<input type="text" id="change_color_example" class="example-input" />
We can start of by grabbing the input element from the DOM.
const input = document.querySelector('input');
Once we have the element to work with we can, we can add an event listener (blur) so whenever a user moves out of the box the action in the code will be performed.
JS:
const input = document.getElementById("input");
input.addEventListener("blur", () => {
if (input.value.length > 3) {
input.style.backgroundColor = "red";
}
});
HTML:
<input type="text" id="input" />

Adding labels to QR codes

I have created a QR code generator. The user can create multiple QR codes.
I would like the user to be able to name each QR code (referred to as a checkpoint) by writing the desired checkpoint name in the text input field, clicking the Assign Name button and having the text input field disappear, being replaced by the name the user typed into the field.
The user can input checkpoint names, however, it only works for the first QR code printed, and the label only appears below the QR code. Below is the code that I have so far. Any help or suggestions to help me get the ball rolling on this would be very much appreciated. Thank you!
Note: If you try to run this to see the QR codes, you will have to enter something in the text field and press generate. They won't appear automatically.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: arial, sans-serif;
}
section {
margin: 50px auto;
max-width: 350px;
text-align: center;
}
textarea {
width: 50%;
height: 50px;
margin-bottom: 10px;
}
#size {
max-width: 64px;
}
label {
display: inline-block;
width: 140px;
text-align: left;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<section>
<h1>QR Code Generator</h1>
<p>Enter a URL or some text bellow and hit the Generate button (<kbd>Ctrl</kbd>+<kbd>Enter</kbd>)!</p>
<textarea id="textarea" autofocus></textarea>
<div class="block">
<label for="size">Size (px):</label>
<input align="left" id="size" type="number" value="150" min="50" max="500" step="50">
<label for="amount">Amount of Labels:</label>
<input align="left" id="amount" type="number" value="1" min="1" max="500" step="1">
<button id="genQRcode">Generate</button>
</div>
<div id="content" style="display: none;"></div>
</section>
<p id="demo" align="center"></p>
<script>
function myFunction() {
var x = document.getElementById("cpname").value;
document.getElementById("demo").innerHTML = x;
}
</script>
<script id="template-qr-code" type="text/html">
<p> <img id="qrcode" src="{{src}}" /></p>
<label for="checkpoint"> Checkpoint Name:</label>
<input id="cpname" type="text" value="">
<button onclick="myFunction()">Assign Name</button>
</script>
<script type="text/javascript">
window.addEventListener('load', function() {
var textarea = document.getElementById("textarea"),
content = document.getElementById("content"),
amount = document.getElementById("amount"),
qrTemplate = document.getElementById('template-qr-code');
function genQRcode() {
var data = encodeURIComponent(textarea.value),
size = document.getElementById("size").value,
chart = "http://chart.googleapis.com/chart?cht=qr&chs=" + size + "x" + size + "&choe=UTF-8&chld=L|0&chl=" + data;
if (data === "") {
alert("Please enter valid data!");
textarea.focus();
content.style.display = "none";
} else {
for (var i = 0; i < amount.value; i++) {
var qrSrc = qrTemplate.innerHTML;
qrSrc = qrSrc.replace(new RegExp('{{src}}', 'g'), chart);
qrSrc = qrSrc.replace(new RegExp('{{i}}', 'g'), i);
content.insertAdjacentHTML('beforeEnd', qrSrc);
}
content.style.display = "";
}
}
document.getElementById("genQRcode").addEventListener("click", genQRcode);
document.addEventListener("keydown", function(e) {
if (e.ctrlKey && e.keyCode == 13) {
genQRcode();
}
});
});
</script>
</body>
</html>
Your click function
function myFunction() {
var x = document.getElementById("cpname").value;
document.getElementById("demo").innerHTML = x;
}
is getting and setting an element by ID. That will only ever affect a single element on the page (usually the first one that the browser runs into with that specific id). You need to use a different selector / way of getting the label you want to change because you can't reuse ids.
Basically you need to make your label fields distinct so you can actually select them

CheckBox Values In HTML

I'm trying to create a site settings page with some checkboxes. If the checkbox is 'ON' a HTML element has a certain value, else it would be something else. But for some reason every checkbox keeps returning the value "on" in JavaScript. Please help.
My HTML:
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
My JavaScript:
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').value;
if (valueOfCheckBox == 'on') {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
your check boxes are checked by default. remove checked=checked from check box input
<input type='checkbox' id='theBOX'>
and yes you have to change the Javascript function to check whether check box has been checked or not
you can get the valueOfCheckBox to be true if the check box is checked otherwise it will be false
var valueOfCheckBox = document.getElementById('theBOX').checked;
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').checked;
if (valueOfCheckBox) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
You should remove the 'checked' attribute from your input tag
<input type='checkbox' id='theBOX' >
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').value;
if (valueOfCheckBox == 'on') {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
You have multiple issues :
1 - You forgot the parentheses on the js function call :
<button onclick='theFunction()'>Apply Changes</button>
2 - When you set your js var with the value, or we dont need it. Just put this :
var valueOfCheckBox = document.getElementById('theBOX');
3 - Then to know wether it is check or not, use the js .checked property as following :
if (valueOfCheckBox.checked == true) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
Finally, your code should look like this :
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
<script type="text/javascript">
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX');
if (valueOfCheckBox.checked == true) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
</script>
You can use .checked property. This property returns true if the checkbox is checked by default, otherwise it returns false.
If you want by default checked on input box, just add checked attribute in input tag.
<input type="checkbox" id="theBOX" checked>
Hope this may help you.
<head>
<script>
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').checked;
if (valueOfCheckBox) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML = 'OFF';
}
}
</script>
</head>
<body>
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
</body>
</html>
This will work.
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX');
if (valueOfCheckBox.checked) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML = 'OFF';
}
}
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked />
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
I would recommend you to use<label for="checkbox">Click this checkbox</label> instead of <p>Click this checkbox</p>.

How to set visiblity to a field group when a value of input is between 1 and 10

When the value in the "tds" field range between 1 to 10 below then the input "TAN" has appeared else it should in should not appear(hidden state)
<input id="tds" type="text" onchange="myFunction()"/>
<input id="myP" name="TAN" style="visibility:hidden;" value="test"/>
<script>
function myFunction() {
tdsvalue = document.getElementById('tds').value;
if (tdsvalue <= 10){
document.getElementById("myP").style.visibility = "";
else
}
}
</script>
Set visibility to visible, not ""
And your code should look like this
<input id="tds" type="text" onchange="myFunction()"/>
<input id="myP" name="TAN" style="visibility:hidden;" value="test"/>
<script>
function myFunction() {
tdsvalue = document.getElementById('tds').value;
if (tdsvalue <= 10) {
document.getElementById("myP").style.visibility = "visible";
}
else {
document.getElementById("myP").style.visibility = "hidden";
}
}
</script>
Note : You can also use display:block to show and display:none to hide.
display:none will not be available in the page and does not occupy any space. visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
Try the following code i.e. improved version of yours:
<input id="tds" type="text" onkeyup="myFunction(this)"/>
<input id="myP" name="TAN" style="display:none;" value="test"/>
<script>
function myFunction(el) {
var tdsvalue = el.value;
if (tdsvalue >= 1 && tdsvalue <=10){
document.getElementById("myP").style.display= "block";
} else {
document.getElementById("myP").style.display= "none";
}
}
</script>
It appears you have a syntax error caused by else.
I would also recommend you parse the value as an integer using parseInt()
function myFunction() {
var tdsvalue = parseInt(document.getElementById('tds').value);
if (tdsvalue <= 10) {
document.getElementById("myP").style.visibility = "visible";
} else {
document.getElementById("myP").style.visibility = "hidden";
}
}
<input id="tds" type="text" onchange="myFunction()" />
<input id="myP" name="TAN" style="visibility:hidden;" value="test" />
If you have any questions about the source code above please leave a comment below and I will reply as soon as possible.
I hope this helps. Happy coding!

Change text color base on checkbox

I'm trying to change the text "I have read and agree...." to a different color when the checkbox is being clicked. Does it require a DIV & label to be place for both the text & checkbox ?.
I also notice the checkbox would be move to next line, when I place in the div class="checkbox" & label
<p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
JS
function isChecked(checkbox, sub1) {
var button = document.getElementById(sub1);
if (checkbox.checked === true) {
button.disabled = "";
} else {
button.disabled = "disabled";
}
}
$(document).ready(function(){
$('#termsChkbx').change(function(){
if($(this).is(':checked'))
{
$(this).parent('p').css('color','black');
}
else
{
$(this).parent('p').css('color','red')
}
});
});
try,
$(document).ready(function(){
$('#termsChkbx').change(function(){
if($(this).is(':checked'))
{
$(this).parent().css('color','black');
}
else
{
$(this).parent().css('color','red')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx" onchange="isChecked(this,'sub1')"/></p>

Categories