Desired result: https://jsfiddle.net/nstruth/t0dopzav/1/
The HTML is displaying when I select Volvo, but the JavaScript isn't running. I looked at other innerHTML JavaScript questions, but I'm confused. As you can see in this JSFiddle the units aren't populating but I can enter numbers in the input field. https://jsfiddle.net/nstruth/ksgwaqc8/8/
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$("#cars2").select2();
});
//Distance Math
var units = [
['Inches', 0.025400000000000],
['Feet', 0.30480000000000000],
['Furlongs', 201.168]
];
var selectors = document.querySelectorAll('.newClass1');
for (var i = 0; i < units.length; i++) {
for (var j = 0; j < selectors.length; j++) {
var option = document.createElement('option');
option.value = units[i][1];
option.textContent = units[i][0];
selectors[j].add(option);
}
}
function calcLength1() {
var SpecialValue = document.getElementById("lengthInput1").value * document.getElementById("lengthCalc1").value / document.getElementById("lengthCalc2").value;
document.getElementById("lengthInput2").value = SpecialValue.toFixed(12);
}
function calcLength2() {
var SpecialValue = document.getElementById("lengthInput2").value * document.getElementById("lengthCalc2").value / document.getElementById("lengthCalc1").value;
document.getElementById("lengthInput1").value = SpecialValue.toFixed(12);
}
function myFunction(event) {
var x = document.getElementById("myDIV");
//here you are picking the selected option item
var y = $('select#cars2 option:selected').val();
switch (y) {
case '1':
x.innerHTML = `<p>From:</p>
<select style="float:left" id="lengthCalc1" class="js-example-basic-single select2-container newClass1" oninput="calcLength1()" onchange="calcLength1()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput1" type="number" oninput="calcLength1()" onchange="calcLength1()" />
<p>To:</p>
<select style="float:left" id="lengthCalc2" class="js-example-basic-single select2-container newClass1" oninput="calcLength2()" onchange="calcLength2()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput2" type="number" oninput="calcLength2()" onchange="calcLength2()" />`;
$(".js-example-basic-single").select2();
break;
case '2':
x.innerHTML = "<p>Roy!</p>";
}
}
select {
width: 150px;
}
.select2-selection--single {
height: 100px !important
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: 2px solid red;
border-radius: 5px;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<div id="myDIV">
<p>Hello</p>
</div>
<label for="cars">Choose a car:</label>
<select id="cars2" onchange="myFunction()">
<option value="0">Pick something</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<script>
</script>
I solved my problem with display:none and jQuery. This fiddle shows what I did. https://jsfiddle.net/nstruth/482sgxcu/9/
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="STYLE.css">
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script> // In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('#cars2').select2();
$('#cars2').select2('open');
});
</script>
<style>..
select {
width: 150px;
}
</style>
</head>
<body>
<div id="myDIV"><p>Hello</p></div>
<label for="cars">Choose a car:</label>
<select id="cars2">
<option value="red">Pick something</option>
<option value="yellow">Volvo</option>
<option value="blue">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<script>
$(function() {
$('#cars2').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div id="yellow" style="display:none">
<p>From:</p>
  <select style="float:left;" id="MetricAndImperialLength1" class="js-example-basic-single select2-container newClass1 colors" oninput="Run1()" onchange="Run1()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000" id="Input1" type="number" oninput="Run1()" onchange="Run1()">
<p>To:</p>
<select style="float:left" id="MetricAndImperialLength2" class="js-example-basic-single select2-container newClass1" oninput="Run2()" onchange="Run2()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000" id="Input2" type="number" oninput="Run2()" onchange="Run2()" /></div>
<script src="mathandstuff.js"></script>
<script>
$(".js-example-basic-single").select2();
</script>
</body>
</html>
Related
I'm trying to get something to append, but it's not working, and I can't seem to find what is wrong in my code.
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: Inter;
src: url(fonts/Inter-Black.ttf);
}
body{
background-color: darkred;
font-family: Inter;
}
button, input, select {
background-color: red;
border-style: solid;
border-color: black;
border-radius: 5px;
font-family: Inter;
width: 10vw;
height: 4vw;
transition: width 1s;
}
button:hover {
background-color: #e60000;
width: 13vw;
}
#setalarm {
background-color: #4d0000;
width: 85vw;
height:25vw;
border-radius: 10px;
}
input:hover, select:hover {
height: 6vw;
}
input, select {
transition: height 1s;
}
.alarmset:hover {
width: 50vw;
}
</style>
</head>
<body>
<h1>Alarms</h1>
<p>There are no alarms set currently.</p>
<button onclick="seeandcompletealarm()">Set Alarm</button>
<br>
<br>
<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;"><div><h1>Name</h1> <p>Des cript fdgdfgdf.</p> <p>0:00 AM</p></div></div>
<div id="setalarm" style="display: none;">
<input placeholder="Name" value="" id="name">
<input placeholder="Description (Optional)" value="" style="width: 10vw;" id="des">
<input placeholder="Hour" value="" maxlength="2" id="hr">
<input placeholder="Minute" value="" maxlength="2" id="me">
<select>
<option>Once</option>
<option>Repetitive</option>
</select>
<input placeholder="Minute" value="" type="date" id="date" style="width: 15vw;">
<select id="ampm">
<option>AM</option>
<option>PM</option>
</select>
<select>
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>
<br>
<br>
<button onclick="seeandcompletealarm(), setAlarm()">Set</button>
<script>
function seeandcompletealarm() {
if (document.getElementById('setalarm').style.display == "none") {
document.getElementById('setalarm').style.display = "block";
document.getElementById('des').value = "";
document.getElementById('nam').value = "";
document.getElementById('hr').value = "";
document.getElementById('ne').value = "";
} else {
document.getElementById('setalarm').style.display = "none";
var newalarm = document.createElement("DIV");
newalarm.innerHTML = `<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;" class="alarmset"><div><h1>${document.getElementById('nam').value}</h1> <p>${document.getElementById('des').value}</p><p>${document.getElementById('hr').value}:${document.getElementById('me').value} ${document.getElementById('ampm').value}</p></div></div>`;
document.body.appendChild(newalarm)
}
}
</script>
</div>
</body>
</html>
You might see some unnecessary code in there, like the styling and #ids, because this is pasted from my project.
If you see the thing that says "Name" in big text "Des cript fdgdfgdf." in shorter text, and "0:00 AM", when you press the button that says "Set" which is visible when you press the Set Alarm button, it is suppose to append another one of those things with the values you have put in the in the input, it is suppose to look the same just with what you have typed. It use to be working before but now it's not, please show me how this can be fixed.
First we can read the error message and try to understand what it says:
Cannot set property 'value' of null
So once detected the proper location of the bug, we can determine that it's caused because the script can't access the property value of a null element.
In fact, this happens because neither document.getElementById('ne') nor document.getElementById('nam') can be found in the current HTML, which, by default, will become null.
So in order to fix it, place the proper id you want to change value. In this case, I can say you meant "me" instead of "ne" and "name" instead of "nam". Also, you placed "nam" in the else when creating a new alarm.
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: Inter;
src: url(fonts/Inter-Black.ttf);
}
body{
background-color: darkred;
font-family: Inter;
}
button, input, select {
background-color: red;
border-style: solid;
border-color: black;
border-radius: 5px;
font-family: Inter;
width: 10vw;
height: 4vw;
transition: width 1s;
}
button:hover {
background-color: #e60000;
width: 13vw;
}
#setalarm {
background-color: #4d0000;
width: 85vw;
height:25vw;
border-radius: 10px;
}
input:hover, select:hover {
height: 6vw;
}
input, select {
transition: height 1s;
}
.alarmset:hover {
width: 50vw;
}
</style>
</head>
<body>
<h1>Alarms</h1>
<p>There are no alarms set currently.</p>
<button onclick="seeandcompletealarm()">Set Alarm</button>
<br>
<br>
<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;"><div><h1>Name</h1> <p>Des cript fdgdfgdf.</p> <p>0:00 AM</p></div></div>
<div id="setalarm" style="display: none;">
<input placeholder="Name" value="" id="name">
<input placeholder="Description (Optional)" value="" style="width: 10vw;" id="des">
<input placeholder="Hour" value="" maxlength="2" id="hr">
<input placeholder="Minute" value="" maxlength="2" id="me">
<select>
<option>Once</option>
<option>Repetitive</option>
</select>
<input placeholder="Minute" value="" type="date" id="date" style="width: 15vw;">
<select id="ampm">
<option>AM</option>
<option>PM</option>
</select>
<select>
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>
<br>
<br>
<button onclick="seeandcompletealarm(), setAlarm()">Set</button>
<script>
function seeandcompletealarm() {
if (document.getElementById('setalarm').style.display == "none") {
document.getElementById('setalarm').style.display = "block";
document.getElementById('des').value = "";
document.getElementById('name').value = ""; // <-- ERROR WAS IN THIS LINE
document.getElementById('hr').value = "";
document.getElementById('me').value = ""; // <-- ERROR WAS IN THIS LINE
} else {
document.getElementById('setalarm').style.display = "none";
var newalarm = document.createElement("DIV");
newalarm.innerHTML = `<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;" class="alarmset"><div><h1>${document.getElementById('name').value}</h1> <p>${document.getElementById('des').value}</p><p>${document.getElementById('hr').value}:${document.getElementById('me').value} ${document.getElementById('ampm').value}</p></div></div>`;
document.body.appendChild(newalarm)
}
}
</script>
</div>
</body>
</html>
I'm trying to create checks to validate the input of a user, such as whether he filled it out and is it the correct input. I want it to highlight the fields that contain an error.
I already asked and I was told to create a class however I don't know how to do that.
There is also
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Form Validation</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/forms.css">
<script type="text/javascript">
window.onload=init;
var form;
function init() {
form = document.getElementById('testform');
form.addEventListener("submit", checkSubmit, false);
form.addEventListener("reset", checkReset, false);
form['colour'].addEventListener("change", checkSubmit, false);
form['name'].focus();
}
String.prototype.trim=function() {
return this.replace(/^\s+1\s+$/g, '');
}
function whichButton(name) {
var buttons=document.getElementsByName(name);
for (var i in buttons) {
if(buttons[i].checked) return buttons[i].value
}
return false;
}
function showOtherColour() {
document.getElementById('othercolour').style.visibility=
form['colour'].value=='other' ? 'visible' : 'hidden';
}
function checkSubmit() {
error = new Array();
//Fill the array with the error value
form['name'].value=form['name'].value.trim();
form['email'].value=form['email'].value.trim();
form['town'].value=form['town'].value.trim();
form['state'].value=form['state'].value.trim();
form['postcode'].value=form['postcode'].value.trim();
form['dob'].value=form['dob'].value.trim();
form['height'].value=form['height'].value.trim();
//Check required fields
if(!form['name'].value)
error.push('Missing Name');
if(!form['email'].value)
error.push('Missing Email Address');
if(!form['password'].value)
error.push('Missing Password');
//Check valid email address
var pattern=/^[a-zA-Z0-9._%-]+#[a-zA-Z0-9.-]+(\.[a-zA-Z]{2,4})$/;
if(!form['email'].value.match(pattern))
error.push('Invalid Email Address');
//Check State
//Check Post Code has 4 digits
var pattern=/^\d{4}$/;
if(!form['postcode'].value.match(pattern))
error.push('Invalid Post Code');
//Check password matches confirmation
//var password = ;
/*
if(!form['passwordConfirm'].value.match(password)){
error.push("Passwords don't match");
}*/
console.log(form['confirm'].value);
console.log(form['password'].value);
if(!form['confirm'].value.match(form['password'].value)){
error.push('Passwords do not match');
}
//passwords is too short
if (!form['password'].value.length < 4) {
error.push("Password is too short (Minimum 4 characters)");
}
//height is not a number
if (isNaN(Number(form['height'].value))) {
error.push("Height is not a number");
}
//Check that one Gender item is selected
if(whichButton('gender')===false)
error.push('Please choose a Gender');
//Check that "Other" field is filled
if (!form['colour'].value ||
(form['colour'].value=='other' && !form['othercolour'].value))
error.push('Colour is not selected');
if(error.length) { // if there are errors
alert(error.join("\n"))
return false;
}
else return true;
//return confirm("This will submit the form"); //Temporary placeholder
}
function checkReset() {
return confirm("This will clear the form data");
}
</script>
<style type="text/css">
body,td,th {
font-size: 0.9em;
}
</style>
</head>
<body>
<div id="body">
<h1>Form Validation</h1>
<form action="http://test.miform.net" method="post" id="testform">
<fieldset>
<label>Name<br><input type="text" name="name" class="wide"></label>
<label>Email Address<br><input type="text" name="email" class="wide"></label>
</fieldset>
<fieldset>
<label>Address<br><input type="text" name="street" class="wide"></label>
<label>Town<br><input type="text" name="town" class="narrow"></label>
<label>State<br><input type="text" name="state" class="narrow"></label>
<label>PostCode<br><input type="text" name="postcode" class="narrow"></label>
</fieldset>
<fieldset>
<label>Password<br><input type="password" name="password" class="medium"></label>
<label>Confirm Password<br><input type="password" name="confirm" class="medium"></label>
</fieldset>
<fieldset>
<label>Date of Birth<br><input type="text" name="dob" class="medium"></label>
<label>Height<br><input type="text" name="height" class="medium"></label>
</fieldset>
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="f">Female</label>
<label><input type="radio" name="gender" value="m">Male</label>
</fieldset>
<fieldset>
<label>Colour
<select name="colour">
<option value="">Select...</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="cyan">Cyan</option>
<option value="magenta">Magenta</option>
<option value="yellow">Yellow</option>
<option value="other">Other</option>
</select>
</label>
<input type="text" id="othercolour">
</fieldset>
<input type="reset" name="reset" value="Clear Form">
<input type="submit" name="send" value="Send Off">
</form>
</div>
</body>
</html>
The CSS (form.css):
body {
font-family: sans-serif;
font-size: .9em;
}
form {
width: 26em;
}
label {
font-weight: bold;
float: left;
}
input.wide {
padding: .125em;
width: 25.125em;
}
input.medium {
padding: .125em;
width: 12em;
}
input.narrow {
padding: .125em;
width: 8em;
}
#othercolour {
visibility: hidden;
}
The style.css
body {
font-family: sans-serif;
font-size: .9em;
background-color: rgb(166, 183, 183);
color: black;
}
div#body {
width: 30em;
margin: auto;
padding: 1em 2em;
background-image: url(background.png);
background-repeat: repeat-x;
background-color: rgb(224, 230, 230);
}
h1,h2 {
color: rgb(47, 79, 79);
}
h2 {
margin: .25em 0em .25em 0em;
}
a {
text-decoration: none;
color: rgb(132, 156, 156);
color: white;
font-weight: bold;
}
a:hover {
color: yellow;
}
td, th {
vertical-align: top;
text-align: left;
}
img {
border: 0px;
}
p, .clear {
qclear: both;
}
#catalog {
float: left;
width: 50%;
}
#content {
float: right;
width: 46%;
}
#cart {
border: 1px solid #cccccc;
padding: 0em .5em;
}
#cart form {
display: inline;
}
#cart input.text {
width: 2em;
text-align: right;
}
#welcome {
}
#navigation {
}
#navigation span {
color: rgb(131, 155, 155);
}
#navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
#navigation li {
float: left;
background-color: pink;
border-bottom: solid 1px;
}
#navigation li a {
display: block;
width: 8em;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: .25em;
background-color: rgb(97, 124, 124);
}
#navigation li a:hover {
background-color: rgb(47, 79, 79);
}
You can set the input's CSS border-color property to highlight the field.
var input = document.querySelector('input'),
form = document.querySelector('form');
form.addEventListener('submit', function(e){
e.preventDefault();
if(!input.value.trim()){//if value of input is empty
input.style.borderColor = "red";
} else {
input.style.borderColor = "green";
}
});
<form>
<input placeholder="Enter something">
<br/>
<button>Validate</button>
</form>
If you use the HTML5 validation attributes, then all you’ll need is to set up a CSS rule using the :invalid pseudo class:
:invalid { . . . }
To add a class, use JavaScript's classList.add() function.
Example
function check() {
var element = document.getElementById("input");
if (element.value != "") {
document.write("Valid!");
} else {
element.classList.add("invalid");
}
}
.invalid {
background-color: rgba(255,0,0,.7);
color: white;
}
.invalid::placeholder {
color: white;
}
<input type="text" placeholder="Type Something..." id="input">
<button onclick="check();">Check</button>
I have a text area within a simple website, where a user can type in what they like. I would like to add a selector(Dropdown box/Combobox) to change the color of all of the text within said text area.
full code
function Text() {
if(document.getElementById("textarea").style.fontWeight != 'bold')
document.getElementById("textarea").style.fontWeight = 'bold';
else
document.getElementById("textarea").style.fontWeight = 'normal';
}
function Text() {
if(document.getElementById("textarea").style.fontStyle != 'italic')
document.getElementById("textarea").style.fontStyle = 'italic';
else
document.getElementById("textarea").style.fontStyle = 'normal';
}
function Text() {
if(document.getElementById("textarea").style.textDecoration != 'underline')
document.getElementById("textarea").style.textDecoration = 'underline';
else
document.getElementById("textarea").style.textDecoration = 'none';
}
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color=color;
}
body {
padding: 0px;
margin: auto;
display: block;
width: 10px;
height: 7px;
position: center;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 112px;
color: #C0C0C0;
text-align: center;
}
textarea {
width: 90%;
height: 450px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid;
background-color:;
font-size: 16px;
resize: none;
}
#Button {
position: relative;
top: 450px;
left: 50px;
}
#Button {
position: relative;
top: 450px;
left: 70px;
}
#Button {
position: relative;
top: 450px;
left: 90px;
}
select {
position: relative;
top: -302px;
left: 320px;
}
<!doctype html>
<html>
<head>
<title>Simple Word Processor</title>
</head>
<body>
<button id="Button" type="button" onclick="boldText()">Bold</button>
<button id="Button" type="button" onclick="italicText()">Italic</button>
<button id="Button" type="button" onclick="underlineText()">Underline</button>
<form id="form">
<textarea id="textarea">Enter text here...</textarea>
</form>
<select id="colorChanger">
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
</body>
</html>
Just set style.color like below.
var list = document.getElementById('textarea');
list.style.color = color;
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color = color;
}
<textarea id="textarea">Enter text here...</textarea>
<select id="colorChanger">
<option value="black">black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
getElementById will not return an array
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea1');
list.style.color=color;
}
<textarea id="textarea1">Enter text here...</textarea>
<select id="colorChanger">
<option value="#000">black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
Created a fiidle for you here.
Using traditional javascript:
<script type="text/javascript">
function abc(val){
document.getElementById("textarea").style.color=val;
}
</script>
<textarea id="textarea">Enter text here...</textarea>
<select id="colorChanger" onmousedown="this.value='';" onchange="abc(this.value)">
<option value="black">black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
Updatee:
In yopu code add:
<script>
function changeColor() {
var color = document.getElementById('colorChanger').value;
document.getElementById("textarea").style.color=color;
}</script>
in the header after style tag.
also you not calling function onchange of select tag. add this in select tag.
<select id="colorChanger" onchange="changeColor()">
You combined my previous code with a comment in your question you changed my getElementById to getElementByTagName and it should be getElementsByTagName you missed the s and it will return an array whereas getElementById will return an object
function boldText() {
if(document.getElementById("textarea").style.fontWeight != 'bold')
document.getElementById("textarea").style.fontWeight = 'bold';
else
document.getElementById("textarea").style.fontWeight = 'normal';
}
function italicText() {
if(document.getElementById("textarea").style.fontStyle != 'italic')
document.getElementById("textarea").style.fontStyle = 'italic';
else
document.getElementById("textarea").style.fontStyle = 'normal';
}
function underlineText() {
if(document.getElementById("textarea").style.textDecoration != 'underline')
document.getElementById("textarea").style.textDecoration = 'underline';
else
document.getElementById("textarea").style.textDecoration = 'none';
}
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color=color;
}
body {
border: 3px solid #C0C0C0 ;
padding: 0px;
margin: auto;
display: block;
width: 1000px;
height: 700px;
position: center;
outline-style: solid;
outline-color: #f8f8f8;
outline-width: 10000px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 112px;
color: #C0C0C0;
position: relative;
top: -220px;
text-align: center;
}
textarea {
width: 90%;
height: 450px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #C0C0C0;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
position: relative;
top: -305px;
left: 50px;
}
#boldButton {
position: relative;
top: 450px;
left: 50px;
}
#italicButton {
position: relative;
top: 450px;
left: 70px;
}
#underlineButton {
position: relative;
top: 450px;
left: 90px;
}
select {
position: relative;
top: -302px;
left: 320px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Word Processor</title>
</head>
<body>
<button id="boldButton" type="button" onclick="boldText()">Bold</button>
<button id="italicButton" type="button" onclick="italicText()">Italic</button>
<button id="underlineButton" type="button" onclick="underlineText()">Underline</button>
<canvas></canvas>
<h1> Word Processor </h1>
<form id="form">
<textarea id="textarea">Enter text here...</textarea>
</form>
<select id="colorChanger">
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
</body>
</html>
I have a styled-select dropdown menu, and I created it's own .css and .js.
This is what happens when I use only one dropdown menu in a page, which works fine as expected:
jsFiddle OK
Instead when I use two dropdown menu it's a mess, and it's normal, because my .js file will do it's functions to all those dropdown menu which exists on the page. This is how it appears when I use two dropdown menu with the same .js and .css files:
jsFiddle NOT OK
Now my questions is how can I use the same .js and .css files for multiple dropdown's which all of them act as expected?
$(function () {
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select div').click(function () {
$('.styled-select select').show();
$('.styled-select select').attr('size', 5);
$('.styled-select select').focus();
});
$('.styled-select select').click(function () {
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select select').hide();
});
$('.styled-select select').focusout(function () {
$('.styled-select select').hide();
});
});
.styled-select select {
position: absolute;
background: transparent;
width: 420px;
padding-top: 5px;
font-size: 18px;
font-family: 'PT Sans', sans-serif;
color: black;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 1;
outline: none;
left: -7px;
}
.styled-select {
background: url('../img/campaignSelector.png') no-repeat right;
background-color: white;
width: 420px;
height: 42px;
position: relative;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-position: 97% 50%;
}
.styled-select option {
font-size: 18px;
background-color: white;
margin-left: 3px;
}
::-webkit-scrollbar {
display: none;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div style="width:800px; height: 600px; background: grey;">
<div class="styled-select" style="left:-250px; top:90px; width:200px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">Marco P</option>
<option value="1">Marco F</option>
<option value="2">Daniele</option>
<option value="3">Cristina</option>
<option value="4">Angine</option>
</select>
</div>
<div class="styled-select" style=" width:200px; left:50px; top:48px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">ReshaD</option>
<option value="1">Rasheed</option>
<option value="2">Reza</option>
<option value="3">Davin</option>
<option value="4">Ariya</option>
</select>
</div>
</div>
To make your code work for multiple instances of the .styled-select container you need to use $(this) to reference the element which is raising the event and then use closest() to get the nearest parent .style-select. From there you can use find() to get the required element. Try this:
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').each(function() {
var $container = $(this).closest('.styled-select');
$(this).html($container.find('select option:selected').text());
});
$('.styled-select div').click(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').show().attr('size', 5).focus();
});
$('.styled-select select').click(function() {
var $container = $(this).closest('.styled-select');
var text = $container.find('select option:selected').text();
$container.find('div').html(text);
$container.find('select').hide();
});
$('.styled-select select').focusout(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').hide();
});
Updated fiddle
I have a text input. I put a label with a red star to highlight that that input is required in the form submission.
What I did is
<html>
<head>
</script>
<style type="text/css">
input[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
input[required] + label:after {
content:'*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
display: none;
}
</style>
</head>
<body>
<form name="registerForm" action="submit_page.php" method="post">
<div class="form_box">
<div class="input_box ">
<input maxlength="60" type="text" name="name" id="name" required="required" />
<label for="name">Name</label>
<div id="name-error" class="error-box"></div>
</div>
<div class="clear"></div>
</div>
</form>
</div>
</body>
It works for the text input.
I did the same thing for <select <select/>.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#header { background-color:green; color:white; text-align:center; padding:5px;}
#background {background: url(register_background.png);}
body {
background-color: #cccccc;
}
.star { color: red;}
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}
.button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
select[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
select[required] + label:after {
content:'*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
select[required]:invalid + label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
select[required]:valid + label{
display: none;
}
</style>
</head>
<body>
<div id="header">
<h1>Please add your property to advertise</h1>
</div>
<div id="background">
<form name="advertiseForm" method="post">
<br /><br />
<select name="divs_states">
<option value="divsORstates" >Divisions or States</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
required="required"
<select/>
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>
</form>
</div>
</body>
</html>
But I don't see a red star. Then when I make a selection, the text doesn't disappear.
What should be is if the selection is Divisions or States, the label Please select a region together with a red star should appear. In case, I select saab, fiat, audi, the text should disappear.
How can I do that?
Thanks
EDIT:
<select name="divs_states" required="required"/>
<option value="divsORstates" >Divisions or States</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<select/>
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>
The reason for your problem is that you're using the same selector from your input label for your select label.
You have this on both:
input[required] + label:after {
content:'*';
color: red;
}
But in your select form the HTML is different. It needs to be this instead:
select[name] + label:after {
content:'*';
color: red;
}
A little too much cut and paste, perhaps? ;-)
Also note that your closing </select> tag is incorrect, and you have required="required" misplaced in the element (ah, there it is). It should be in the opening <select> tag. In fact, consider running your code through the W3C HTML Validation Service to check for errors.