We Keep Coding

How to change color of div element depending on color of the block with JavaScript?

I have 2 blocks for user to choose from and they should be interactive. The block changes the color and the vertical line color should be changed to opposite. I wonder if I could make it right in the same code snippet which does the color change of the code block, because previously I made it, but with another for loop and it's not the fastest way.
let vanOption = document.getElementsByClassName("van-quote-option");
let quoteVl = document.getElementById("option-vl");
// Van option selection
for (var x = 0; x < vanOption.length; x++) {
vanOption[x].addEventListener("click", function() {
var currentOption = document.getElementsByClassName("option-active");
if (currentOption.length > 0) {
currentOption[0].className = currentOption[0].className.replace(" option-active", "");
}
this.className += " option-active";
});
}
.van-quote-option {
display: flex;
justify-content: space-evenly;
margin: 25px 165px 20px 165px;
border: 1px solid grey;
cursor: pointer;
transition: 0.5s;
}
.option-active {
background-color: #18A063;
color: #fff;
}
.quote-vl {
border-left: 2px solid #13985C;
height: 116px;
}
.quote-vl-active {
border-left: 2px solid #fff;
height: 116px;
}
.quote-icon {
margin: 25px 0 0 35px;
}
.quote-van-icon {
font-size: 49px;
padding: 8px;
border-radius: 50%;
height: 60px;
background-color: rgb(245, 245, 245);
color: #18A063;
}
.quote-car-icon {
font-size: 49px;
padding: 9px;
height: 52px;
background-color: rgb(245, 245, 245);
color: #18A063;
border-radius: 50%;
}
.quote-bicycle-icon {
font-size: 49px;
padding: 10px;
height: 55px;
background-color: rgb(245, 245, 245);
color: #18A063;
border-radius: 50%;
}
.quote-p {
text-align: left;
}
.quote-p-van {
text-align: left;
margin-top: 5px;
}
.bicycle-quote-vl,
.car-quote-vl {
height: 124px;
}
.quote-price {
display: flex;
flex-direction: column;
justify-content: center;
}
.quote-price-van {
margin-top: 10px;
}
.van-send-price,
.car-send-price,
.bicycle-send-price {
font-size: 25px;
font-weight: 700;
}
.van-send-price::before,
.car-send-price::before,
.bicycle-send-price::before {
content: "\00A3";
}
<div class="quote-options">
<div class="van-quote-option option-active">
<div class="quote-icon quote-icon-1">
<i class="fas fa-truck quote-van-icon"></i>
</div>
<div class="quote-p-van">
<div class="quote-p-1">Sending 1 or 2 items (with van)</div>
<br />
<div class="quote-p-2">
We'll take a maximum of 2 items for you<br />
to deliver immediately at any location.
</div>
</div>
<div class="quote-vl quote-vl-active"></div>
<div class="quote-price-van">
<span class="van-send-price" id="van-deliver-price">14</span><br />
For a max.<br />
of 2 items.
</div>
</div>
<div class="van-quote-option">
<div class="quote-icon quote-icon-1">
<i class="fas fa-truck quote-van-icon"></i>
</div>
<div class="quote-p-van">
<div class="quote-p-1">Hire a van</div>
<br />
<div class="quote-p-2">
We'll take a maximum of 2 items for you<br />
to deliver immediately at any location.
</div>
</div>
<div class="quote-vl"></div>
<div class="quote-price-van">
<span class="van-send-price" id="van-deliver-price">38</span><br />
Hire a van,<br />
∞ items
</div>
</div>
</div>

You can fix this with css.
You don't really need the quote-vl-active class. Remove it.
You can refer to the vertical line when it's active using option-active since it's the child of that element.
.option-active > .quote-vl {
border-left: 2px solid white;
height: 116px;
}
See this fiddle: https://jsfiddle.net/29r1v0Lo/

might want to use onclick vs. adding listeners as well.
Here is a jsfiddle of it a bit cleaner and with the vert bar having the opposite color: https://jsfiddle.net/7L0uzkxj/
You can just have the CSS control the vert bar:
.quote-vl {
border-left: 2px solid green;
height: 116px;
}
.option-active .quote-vl {
border-left: 2px solid white;
height: 116px;
}
You can then clean up the JS to look like this:
function triggerMe(evt) {
let vanOption = document.getElementsByClassName("van-quote-option");
[...vanOption].forEach(x => {
if (x.classList.contains('option-active')) {
x.classList.remove('option-active');
}
})
evt.classList.toggle('option-active');
}

Dropdown menu with result js

I am writing a search menu that searches for and shows on the page all matching substrings in a string on pure js. I made the search on page, but I don't know how to display the results in the search drop-down menu with the number of results like on picture use only js. My code and picture below:
const input = document.querySelector('input')
const paragraphs = document.querySelectorAll('p')
input.addEventListener('input', e => {
const searchTerm = e.target.value
const regex = new RegExp(searchTerm, 'g')
const replacement = `<span class="highlighted">${ searchTerm }</span>`
for (const p of paragraphs) {
p.innerHTML = p.innerText.replace(regex, replacement)
}
})
:root {
--primary-color: crimson;
--dark-color: #013;
--light-color: whitesmoke;
}
body {
color: var(--dark-color);
background-color: var(--light-color);
padding: 1rem;
}
header {
text-align: center;
}
main {
max-width: 567px;
margin: 0 auto;
}
.search__container {
text-align: center;
padding: 1rem;
margin: 0 auto;
}
.search__input {
border: 2px solid var(--dark-color);
padding: 1rem;
text-align: center;
}
.search__input:hover,
.search__input:focus {
outline: none;
border-color: var(--primary-color);
-webkit-box-shadow: 0 0 5px 0.1px var(--primary-color);
box-shadow: 0 0 5px 0.1px var(--primary-color);
}
.highlighted {
text-shadow: 0 0 6px var(--primary-color);
color: var(--primary-color);
}
<section class="search__container">
<input class="search__input" type="text" spellcheck="false" placeholder="search..." />
</section>
<section>
<div class="paragraphs">
<div id="p"><p>Buffalofish sawtooth </p>
<p>eel tigerperch, john dory sleeper,</p>
<p>Spanish mackerel </p>
<p>sockeye salmon sturgeon </p>
<p>gray mullet bottlenose. </p>
<p>Banjo catfish wallago; deep </p>
<p>sea smelt titan triggerfish </p>
<p>Australian grayling threadfin </p>
<p>bighead carp longnose lancetfish </p>
<p>pineconefish. Pipefish mojarra </p>
<p>northern pearleye cutthroat trout </p>
<p>sand diver; freshwater shark wrasse. </p></div>
</div>
</section>

I wrote this code, which allows you to count the number of words in your text that have your search term. AND you get a dynamic list of words that contain your search term. (I touch only HTML and JS files)
Hint: If you want to have the dynamic list more "beautiful" change the <div id="listFound"></div> with list tags, like <ul> and <li> but keep the id="listFound"
const input = document.querySelector('input')
const paragraphs = document.querySelectorAll('p')
input.addEventListener('input', e => {
document.getElementById('listFound').textContent = "" //init after each additional letter
const searchTerm = e.target.value
const regex = new RegExp(searchTerm, 'g')
const replacement = `<span class="highlighted">${ searchTerm }</span>`
for (const p of paragraphs) {
p.innerHTML = p.innerText.replace(regex, replacement)
}
/*ADD*/
string_to_array(document.getElementById('p').textContent)
checkWords(searchTerm)
let text = document.getElementById('p').textContent
let separator = searchTerm
let number = WordCount(text, separator)
document.getElementById('result').textContent = number
if(searchTerm === ""){
document.getElementById('listFound').textContent = ""
document.getElementById('result').textContent = 0
}
})
/*ADD 3 functions*/
var arrayFromWords = []
function string_to_array(str) {
arrayFromWords = str.trim().split(" ");
}
function checkWords(searchTerm){
arrayFromWords.forEach(element => {
if(element.includes(searchTerm)){
document.getElementById('listFound').textContent += element
}
})
}
function WordCount(str, separator) {
return (str.split(separator).length -1);
}
:root {
--primary-color: crimson;
--dark-color: #013;
--light-color: whitesmoke;
}
body {
color: var(--dark-color);
background-color: var(--light-color);
padding: 1rem;
}
header {
text-align: center;
}
main {
max-width: 567px;
margin: 0 auto;
}
.search__container {
text-align: center;
padding: 1rem;
margin: 0 auto;
}
.search__input {
border: 2px solid var(--dark-color);
padding: 1rem;
text-align: center;
}
.search__input:hover,
.search__input:focus {
outline: none;
border-color: var(--primary-color);
-webkit-box-shadow: 0 0 5px 0.1px var(--primary-color);
box-shadow: 0 0 5px 0.1px var(--primary-color);
}
.highlighted {
text-shadow: 0 0 6px var(--primary-color);
color: var(--primary-color);
}
<section class="search__container">
<input class="search__input" type="text" spellcheck="false" placeholder="search..." />
<div id="result"></div> <!--ADD-->
<div id="listFound"></div>
</section>
<section>
<div class="paragraphs">
<section>
<div class="paragraphs">
<div id="p"><p>Buffalofish sawtooth </p>
<p>eel tigerperch, john dory sleeper,</p>
<p>Spanish mackerel </p>
<p>sockeye salmon sturgeon </p>
<p>gray mullet bottlenose. </p>
<p>Banjo catfish wallago; deep </p>
<p>sea smelt titan triggerfish </p>
<p>Australian grayling threadfin </p>
<p>bighead carp longnose lancetfish </p>
<p>pineconefish. Pipefish mojarra </p>
<p>northern pearleye cutthroat trout </p>
<p>sand diver; freshwater shark wrasse. </p></div>
</div>
</section>
</div>
</section>

Maybe like this:
var input = document.querySelector('input');
var p = document.querySelectorAll('p');
input.addEventListener('input', e => {
var value = input.value;
p.forEach(p => {
if (!p.innerText.includes(value)) {
p.style.display = 'none';
} else {
p.style.display = 'block';
}
p.innerHTML = p.innerText.replace(value, '<span>'+value+'</span>')
})
})
:root {
--primary-color: crimson;
--dark-color: #013;
--light-color: whitesmoke;
}
body {
color: var(--dark-color);
background-color: var(--light-color);
padding: 1rem;
}
header {
text-align: center;
}
main {
max-width: 567px;
margin: 0 auto;
}
.search__container {
text-align: center;
padding: 1rem;
margin: 0 auto;
}
.search__input {
border: 2px solid var(--dark-color);
padding: 1rem;
text-align: center;
}
.search__input:hover,
.search__input:focus {
outline: none;
border-color: var(--primary-color);
-webkit-box-shadow: 0 0 5px 0.1px var(--primary-color);
box-shadow: 0 0 5px 0.1px var(--primary-color);
}
.paragraphs span {
text-shadow: 0 0 6px var(--primary-color);
color: var(--primary-color);
}
<section class="search__container">
<input class="search__input" type="text" spellcheck="false" placeholder="search..." />
</section>
<section>
<div class="paragraphs">
<p>Google Maps</p>
<p>Google Photos</p>
<p>Google Translate</p>
<p>Google Earth</p>
<p>Google Lens</p>
</div>
</section>

Indent text using javascript by pressing a button

on my website, there are 2 buttons. one button is to indent text to the left and the other button is to indent text to the right. what I am trying to achieve is that whenever I press the indent left or right button, currently selected (on focus) text should move left or right (depending on what button I press). at the same time, I want the font size of that text to go down by one level, so when compared to the text above, it's smaller to the text above.
// global variable
let onFocus = null;
// this function
function focusedText(event) {
onFocus = event.target;
}
function init() {
const newLineButton = document.querySelector('#newLine');
newLineButton.addEventListener("click", newLine);
newLine();
document.querySelector("#printButton").addEventListener("click", printPage)
}
function newLine() {
const newLine = document.createElement("p");
newLine.setAttribute("contenteditable", true);
newLine.addEventListener("keydown", handleKeyDown)
newLine.addEventListener("focus", focusedText)
newLine.classList.add("textLine")
const parent = document.querySelector('#textBox');
parent.appendChild(newLine);
newLine.focus();
}
function handleKeyDown(event) {
if (event.which === 13) {
event.preventDefault();
newLine();
}
}
// this runs the init(); function
init();
// this prints the page
function printPage() {
window.print();
}
// this fuction changes the text size
function textSize(selectTag) {
const listValue = selectTag.options[selectTag.selectedIndex].value;
onFocus.style.fontSize = listValue;
}
* {
padding-top: 0em;
padding-bottom: 0em;
margin-top: 0em;
margin-bottom: 0em;
}
*:focus {
outline: 0px solid transparent;
}
body {
margin: 0;
}
.title {
font-family: 'Assistant', sans-serif;
font-size: 2em;
text-align: center;
text-transform: uppercase;
color: white;
background: #6a0dad;
letter-spacing: 0.20em;
}
.navMenu {
display: flex;
align-items: stretch;
padding-top: 0.5em;
padding-bottom: 0.5em;
justify-content: center;
}
.navMenu button,
#dropDown {
padding: 0.3em 1.2em;
margin: 0 0.1em 0.1em 0;
border: 0.16em solid rgba(255, 255, 255, 0);
border-radius: 2em;
box-sizing: border-box;
font-family: 'Assistant', sans-serif;
font-weight: bold;
font-size: 1rem;
color: white;
text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
text-align: center;
transition: all 0.2s;
background-color: #6a0dad;
cursor: pointer;
}
.navMenu button:hover,
#dropDown:hover {
border-color: white;
}
#dropDown option {
font-weight: bold;
}
#textBox {
display: flex;
justify-content: left;
width: auto;
flex-flow: column nowrap;
font-family: 'Assistant', sans-serif;
}
.textLine {
color: black;
width: 100%;
padding-left: 0.8em;
padding-right: 0.8em;
box-sizing: border-box;
transition: background-color 0.25s;
}
#media screen {
.textLine:hover {
background-color: #6a0dad;
color: white;
}
}
#media print {
.navMenu,
.title {
display: none;
}
}
.textLine:empty::before {
content: "Enter your text here";
color: grey;
font-family: 'Assistant', sans-serif;
pointer-events: none;
}
.textLine:hover:empty::before {
content: "Enter your text here";
color: white;
font-family: 'Assistant', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Outline Editing</title>
<link rel="stylesheet" type="text/css" href="main-css.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<main>
<h1 class="title">Outline Editing</h1>
<nav class="navMenu">
<button type="button" id="indentLeft"><i class="material-icons">format_indent_decrease</i></button>
<select id="dropDown" onchange="textSize(this);" size="1">
<option value="" selected disabled hidden>Levels</option>
<option value="200%">Level 1</option>
<option value="170%">Level 2</option>
<option value="150%">Level 3</option>
<option value="130%">Level 4</option>
<option value="100%">Level 5</option>
</select>
<button type="button" id="newLine">New Line</button>
<button type="button" id="indentRight"><i class="material-icons">format_indent_increase</i></button>
<button type="button" id="printButton">Print</button>
</nav>
<div id="textBox">
</div>
<script src="main.js"></script>
</main>
</body>
</html>

You could just add "Horizontal Tab" as an HTML entity on your focused text.
First change the <p> to <pre>.
function newLine() {
const newLine = document.createElement("pre");
//...
}
Update your init function:
function init() {
var newLineButton = document.querySelector('#newLine');
newLineButton.addEventListener("click", newLine);
newLine();
document.querySelector("#printButton").addEventListener("click", printPage);
let indentRight = document.getElementById("indentRight");
indentRight.addEventListener("click", IndentRight_Click);
let indentLeft = document.getElementById("indentLeft");
indentLeft.addEventListener("click", IndentLeft_Click);
}
Then you can add the "Horizontal Tab" on the text that is focused, checking if you have already added:
function IndentRight_Click(event) {
let horizontalTab = " ";
let originalHtml = onFocus.innerHTML;
if (!originalHtml.includes("\t")) onFocus.innerHTML = horizontalTab + originalHtml;
onFocus.focus();
}
And finally, check for it again on your "Left Indentation":
function IndentLeft_Click(event) {
var originalHtml = onFocus.innerHTML;
if (originalHtml.includes("\t")) onFocus.innerHTML = originalHtml.replace("\t", "");
onFocus.focus();
}

Why does the condition not work when changing the selected option?

When a select changes, the text should change. Here's a fiddle.
(function($) {
'use strict';
function funcFormCalc() {
var s1_is_1 = $("#s1").value === '1',
s1_is_2 = $("#s1").value === '2';
var s2_is_1 = $("#s2").value === '1',
s2_is_2 = $("#s2").value === '2';
$('#myForm').onchange = function() {
if (s1_is_1 && s2_is_1) {
$('#result').html('result 1');
} else if (s1_is_2 && s2_is_1) {
$('#result').html('result 2');
} else if (s1_is_1 && s2_is_2) {
$('#result').html('result 3');
} else {
$('#result').html('result 4');
}
};
}
funcFormCalc();
})(window.jQuery);
<form action="#" method="post" id="myForm">
<label for="s1">
Tree Number
<select id="s1">
<option value="1">1</option>
<option value="2">2</option>
</select>
</label><br>
<label for="s2">
Tree Height
<select id="s2">
<option value="1">1 story house</option>
<option value="2">2 story house</option>
</select>
</label>
<div id="result">Result Displays Here</div>
</form>
Why does the result text not change when a selection changes?

You are using the selectVariant booleans to determine which value to show, however these variables are only being calculated once on load. You probably meant to have the calculations in your onchange function.
Also your values do not match the options for select2.
<option value="1 story house">1 story house</option>
<option value="2 story house">2 story house</option>
<option value="3 story house +">3 story house +</option>
-- See snippet at bottom for original answer with some additional refactoring. --
EDIT: You completely changed the code in your question since my first answer...
Though my answer is the same. You need to recalculate selectVariant1, selectVariant2, select2Variant1, and select2Variant2 inside the onchange method.
(function($) {
'use strict';
function funcFormCalc() {
var formCalc = document.getElementsByClassName('form-calc')[0],
formCalcResult = document.getElementsByClassName('form-calc__result')[0],
selectHowManyTrees = document.getElementById('selectHowManyTrees'),
selectApproximateHeightTree = document.getElementById('selectApproximateHeightTree');
formCalc.onchange = function() {
var selectVariant1 = selectHowManyTrees.value === '1',
selectVariant2 = selectHowManyTrees.value === '2';
var select2Variant1 = selectApproximateHeightTree.value === '1',
select2Variant2 = selectApproximateHeightTree.value === '2';
if (selectVariant1 && select2Variant1) {
formCalcResult.innerHTML = 'variant text 1';
} else if (selectVariant2 && select2Variant1) {
formCalcResult.innerHTML = 'variant text 2';
} else if (selectVariant1 && select2Variant2) {
formCalcResult.innerHTML = 'variant text 3';
} else {
formCalcResult.innerHTML = 'for all variants';
}
};
}
funcFormCalc();
})(window.jQuery);
* {
padding: 0;
margin: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
overflow-x: hidden;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
background: #fff;
color: #2C2D2C;
text-align: left;
font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
font-size: 16px;
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.form-calc {
max-width: 400px;
margin: 15px auto;
background: #FAFAFA;
padding: 15px 30px;
}
.form-calc__item {
margin-bottom: 28px;
}
.form-calc__label {
font-size: 14px;
display: block;
margin: 6px 0 9px;
letter-spacing: 0.25px;
}
.form-calc__select-container {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
}
.form-calc__select-container:before,
.form-calc__select-container:after {
content: '';
position: absolute;
right: 7px;
width: 0;
height: 0;
border-style: solid;
pointer-events: none;
}
.form-calc__select-container:before {
top: 16.5px;
border-width: 0 3.5px 4px 3.5px;
border-color: transparent transparent #333 transparent;
}
.form-calc__select-container:after {
bottom: 16.5px;
border-width: 4px 3.5px 0 3.5px;
border-color: #333 transparent transparent transparent;
}
.form-calc__select {
font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
width: 100%;
height: 43px;
line-height: 43px;
border: 1px solid #D9D9D9;
padding: 0 7px;
color: #2C2D2C;
}
.form-calc__select::-ms-expand {
display: none;
}
.form-calc__select option {
padding: 3px 7px;
border: none;
}
.form-calc__result {
font-size: 36px;
font-weight: 500;
color: #3E3F3E;
line-height: 1.4;
margin-bottom: 6px;
}
.form-calc__result-subtext {
font-size: 12px;
text-transform: uppercase;
color: #3E3F3E;
letter-spacing: .6px;
line-height: 1.25;
}
.form-calc__submit {
font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
display: inline-block;
vertical-align: top;
color: #fff;
text-align: center;
min-width: 170px;
padding: 14px 20px;
background: #42BF8D;
text-transform: uppercase;
text-decoration: none;
border: none;
letter-spacing: 0.5px;
font-size: 12px;
cursor: pointer;
-webkit-transition: .3s;
transition: .3s;
}
.form-calc__submit:hover,
.form-calc__submit:focus,
.form-calc__submit:active {
color: #fff;
background: #2F8B66;
}
.form-calc__submit:focus {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .25);
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&subset=latin-ext" rel="stylesheet">
<form action="#" method="post" class="form-calc" autocomplete="off">
<div class="form-calc__item">
<label for="selectHowManyTrees" class="form-calc__label">Label 1</label>
<div class="form-calc__select-container">
<select name="select1" id="selectHowManyTrees" class="form-calc__select">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="form-calc__item">
<label for="selectApproximateHeightTree" class="form-calc__label">Label 2</label>
<div class="form-calc__select-container">
<select name="select2" id="selectApproximateHeightTree" class="form-calc__select">
<option value="1">1 story house</option>
<option value="2">2 story house</option>
</select>
</div>
</div>
<div class="form-calc__item">
<div class="form-calc__result">variant text 1</div>
</div>
</form>
Edit 2: Responding to question in comment.
Excuse me! Not a big question. How would you solve this problem? (other logic).
This is a pretty opinionated question, so this answer is just my opinion. In general I think you have a pretty decent solution.
Your problem is essentially:
Display a result dependent on a combination of inputs.
So there needs to be some way to calculate a value based on the inputs. It would be best if you could do this mathematically, like value1 + value2 + value3 = result. Unfortunately this doesn't seem possible for your problem, but if you are able to do a slight design change then you could try this alternative:
Modify your form so each option has a low-value and high-value.
<select name="select1" id="selectHowManyTrees" class="form-calc__select">
<option low-value="20" high-value="30" selected>1</option>
<option low-value="30" high-value="40">2</option>
<option low-value="40" high-value="50">3</option>
<option low-value="50" high-value="60">4</option>
</select>
<select name="select2" id="selectApproximateHeightTree" class="form-calc__select">
<option low-value="100" high-value="180" story house">1 story house</option>
<option low-value="170" high-value="300" story house">2 story house</option>
<option low-value="220" high-value="600" story house +">3 story house +</option>
</select>
Sum up all the selected low-value and all the selected high-value to calculate the result.
var low = 0, high = 0;
var selects = document.getElementsByClassName('form-calc__select');
for(var s of selects) {
var selectedOption = s.options[ s.selectedIndex ];
low += selectedOption.getAttribute('low-value');
high += selectedOption.getAttribute('high-value');
}
Display this as a range for your result.
formCalcResult.innerHTML = '$' + low + ' - $' + high;
or with ES6 string interpolation
formCalcResult.innerHTML = `$${low} - $${high}`;
Now it may be that you cannot do this, and that there is no way to mathematically calculate the result. In this scenario you are forced to find a way to link a combination of inputs to a result, which is what you did using a bunch of booleans.
How could you do it better? A database.
The ideal place for storing data relationships is in a database. Then your application can dynamically display all the options and results. This will allow you whenever there is a change to a value you just update the data rather than updating the entire application. It is also a very readable way of storing the different option combinations. For example you could have a table that looks like this:
NumberOfTreesId | TreeHeightId | JobTypeId | LocationPropertyId |Result
1 | 1 | 1 | 1 | '$250 - $610'
1 | 1 | 1 | 2 | '$350 - $825'
This example resembles SQL, but you could do something very similar using a non-relational database if you wanted.
Of course, using a database adds a lot of complexity to your application and you are just doing a JS tutorial, so definitely overkill. So after all that I would say design-wise your code is perfectly fine. There is a lot of ways you could refactor to make it more readable and less code, but in the end the concept will be the same.
There are a lot of ways this could be written differently, here is one way:
(function($) {
'use strict';
var results = [ ];
function addResult(s1, s2, s3, s4, r) {
results.push({
select1 : s1,
select2 : s2,
select3 : s3,
select4 : s4,
result : r
});
}
var defaultResult = '$450 - $750';
addResult('1', '1', '1', '1', '$250 - $610');
addResult('1', '1', '1', '2', '$350 - $825');
addResult('1', '1', '1', '3', '$250 - $610');
addResult('1', '2', '1', '1', '$425 - $1200');
addResult('1', '2', '1', '2', '$546 - $1620');
addResult('1', '2', '1', '3', '$420 - $1200');
addResult('1', '3', '1', '1', '$750 - $1800');
addResult('1', '3', '1', '2', '$900 - $2000');
addResult('2', '1', '1', '1', '$500 - $850');
addResult('2', '1', '1', '2', '$650 - $1000');
addResult('2', '1', '1', '3', '$500 - $850');
function funcFormCalc() {
var formCalc = document.getElementsByClassName('form-calc')[0],
formCalcResult = document.getElementsByClassName('form-calc__result')[0],
selectHowManyTrees = document.getElementById('selectHowManyTrees'),
selectApproximateHeightTree = document.getElementById('selectApproximateHeightTree'),
selectJobType = document.getElementById('selectJobType'),
selectLocationProperty = document.getElementById('selectLocationProperty');
formCalc.onchange = function() {
var s1 = selectHowManyTrees.value,
s2 = selectApproximateHeightTree.value,
s3 = selectJobType.value,
s4 = selectLocationProperty.value;
var text = defaultResult;
for(var result of results)
{
if(s1 === result.select1 &&
s2 === result.select2 &&
s3 === result.select3 &&
s4 === result.select4) {
text = result.result;
}
}
formCalcResult.innerHTML = text;
//console.log(`${s1} ${s2} ${s3} ${s4}`);
};
}
funcFormCalc();
})(window.jQuery);
* {
padding: 0;
margin: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
overflow-x: hidden;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
background: #fff;
color: #2C2D2C;
text-align: left;
font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
font-size: 16px;
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.form-calc {
max-width: 400px;
margin: 15px auto;
background: #FAFAFA;
padding: 15px 30px;
}
.form-calc__item {
margin-bottom: 28px;
}
.form-calc__label {
font-size: 14px;
display: block;
margin: 6px 0 9px;
letter-spacing: 0.25px;
}
.form-calc__select-container {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
}
.form-calc__select-container:before,
.form-calc__select-container:after {
content: '';
position: absolute;
right: 7px;
width: 0;
height: 0;
border-style: solid;
pointer-events: none;
}
.form-calc__select-container:before {
top: 16.5px;
border-width: 0 3.5px 4px 3.5px;
border-color: transparent transparent #333 transparent;
}
.form-calc__select-container:after {
bottom: 16.5px;
border-width: 4px 3.5px 0 3.5px;
border-color: #333 transparent transparent transparent;
}
.form-calc__select {
font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
width: 100%;
height: 43px;
line-height: 43px;
border: 1px solid #D9D9D9;
padding: 0 7px;
color: #2C2D2C;
}
.form-calc__select::-ms-expand {
display: none;
}
.form-calc__select option {
padding: 3px 7px;
border: none;
}
.form-calc__result {
font-size: 36px;
font-weight: 500;
color: #3E3F3E;
line-height: 1.4;
margin-bottom: 6px;
}
.form-calc__result-subtext {
font-size: 12px;
text-transform: uppercase;
color: #3E3F3E;
letter-spacing: .6px;
line-height: 1.25;
}
.form-calc__submit {
font-family: 'Montserrat', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
display: inline-block;
vertical-align: top;
color: #fff;
text-align: center;
min-width: 170px;
padding: 14px 20px;
background: #42BF8D;
text-transform: uppercase;
text-decoration: none;
border: none;
letter-spacing: 0.5px;
font-size: 12px;
cursor: pointer;
-webkit-transition: .3s;
transition: .3s;
}
.form-calc__submit:hover,
.form-calc__submit:focus,
.form-calc__submit:active {
color: #fff;
background: #2F8B66;
}
.form-calc__submit:focus {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .25);
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&subset=latin-ext" rel="stylesheet">
<form action="#" method="post" class="form-calc" autocomplete="off">
<div class="form-calc__item">
<label for="selectHowManyTrees" class="form-calc__label">How many trees?</label>
<div class="form-calc__select-container">
<select name="select1" id="selectHowManyTrees" class="form-calc__select">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-calc__item">
<label for="selectApproximateHeightTree" class="form-calc__label">What is the approximate height of the tree?</label>
<div class="form-calc__select-container">
<select name="select2" id="selectApproximateHeightTree" class="form-calc__select">
<option value="1">1 story house</option>
<option value="2">2 story house</option>
<option value="3">3 story house +</option>
</select>
</div>
</div>
<div class="form-calc__item">
<label for="selectJobType" class="form-calc__label">Job Type?</label>
<div class="form-calc__select-container">
<select name="select3" id="selectJobType" class="form-calc__select">
<option value="-1">Complete tree removal</option>
<option value="1">Tree Removal</option>
<option value="2">Tree Prune</option>
<option value="3">Palm Removal</option>
<option value="4">Palm Prune</option>
<option value="5">Arborist Report</option>
</select>
</div>
</div>
<div class="form-calc__item">
<label for="selectLocationProperty" class="form-calc__label">Trees location on your property?</label>
<div class="form-calc__select-container">
<select name="select4" id="selectLocationProperty" class="form-calc__select">
<option selected>Front Yard</option>
<option value="1">Access via a driveway (wide)</option>
<option value="2">Access via a gate (narrow)</option>
<option value="3">Vacant land</option>
</select>
</div>
</div>
<div class="form-calc__item">
<div class="form-calc__result">$250 - $610</div>
<div class="form-calc__result-subtext">Expected price range in Australia</div>
</div>
<div class="form-calc__item">
<button type="submit" class="form-calc__submit">Request a quote</button>
</div>
</form>

how to prevent appendTo method in jquery

I am facing one issue in my html code please check that out below in code:
HTML:
<div class="agent_select_wrap">
<select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Select Category" selected="selected">Select Agent Name</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
</select>
</div>
<div class="agent_select_wrap02">
<div class="my_textarea"></div>
<button>Send</button>
</div>
CSS
.agent_select_wrap { width: 40%; margin: 30px auto 10px auto;}
.agent_select_wrap02 { width: 40%; margin: 0px auto 50px auto;}
.agent_select_wrap select{font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; background: #fff url('../images/selectbox-arrow02.png') right center no-repeat; outline: 0; margin-bottom: 0px; margin: auto; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none; /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.agent_select_wrap select option { background: #fff; color: #000;}
.my_textarea textarea {font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; width:97.4%; display:block; height: 100px; border: 1px solid #ccc; padding: 6px 0 0 6px; margin: 0; border-radius: 0px; /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.my_textarea p{padding: 0; margin: 0; text-align: center; font-size: 12px;font-family: 'Open Sans', sans-serif;}
.agent_select_wrap02 button { display: block; margin: 16px auto 0 auto; padding: 7px 30px; background: #494949; color: #fff; font-weight: 100; font-family: 'Open Sans', sans-serif; font-size: 18px; border: 0;}
.agent_select_wrap02 button:hover {cursor:pointer;}
JS
$(document).on('change', 'select[name=menu-114]', function () {
$("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
$("<p>Please enter your message here..!</p>").appendTo(".my_textarea")
$(function () {
$('select').change(function () {
$that = $(this);
$('textarea').val(function () {
return $(this).prop('defaultValue') + ' ' + $that.val();
});
});
});
});
here is my working example
https://jsfiddle.net/7j623eho/

you just need to change one line of code in javascript code.
$(".my_textarea").html("<textarea> Hello Mr.</textarea><p>Please enter your message here..!</p>");
use above code Instead of yours ..
$("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
$("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

Probably your problem is that you don't remove just created textarea. Try to create it in <div id='temp'> element and then remove this element just before you create new one.
$('#temp').remove();
var container = $('<div id="temp">');
$("<textarea> Hello Mr. </textarea>").appendTo(container);
$("<p>Please enter your message here..!</p>").appendTo(container);
container.appendTo(".my_textarea");

I believe what you want is to create the textarea only once, and let the inline handler to handle further change, so the better way to achieve it is
var onMenuSelected = function () {
$("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
$("<p>Please enter your message here..!</p>").appendTo(".my_textarea")
$(function () {
$('select').change(function () {
$that = $(this);
console.log('Select');
$('textarea').val(function () {
return $(this).prop('defaultValue') + ' ' + $that.val();
});
});
});
// Just unbind self
$(document).off('change', 'select[name=menu-114]', onMenuSelected);
}
$(document).on('change', 'select[name=menu-114]', onMenuSelected);
By define the function, you can directly remove the $(document).on without remove other possible exist handlers. And the select event will only be registered once.
jsFiddle here.

Here we go, use the following code:
HTML
<div class="agent_select_wrap">
<select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Select Category" selected="selected">Select Agent Name</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
</select>
</div>
<div class="agent_select_wrap02">
<div id="my_textarea0">
</div>
<textarea id="my_textarea">
</textarea>
<button>Send</button>
</div>
JS
$(document).on('change', 'select[name=menu-114]', function () {
$("#my_textarea0").html("<textarea> Hello Mr. </textarea>")
$("#my_textarea").html("<p>Please enter your message here..!</p>")
$(function () {
$('select').change(function () {
$that = $(this);
$('textarea').val(function () {
return $(this).prop('defaultValue') + ' ' + $that.val();
});
});
});
});