We Keep Coding

change document stylesheet with select tag in javascript

I have a drop down box on my website that lets you select your theme. The problem is that I can't figure out how to implement it. Here's the javascript:
//selects the select element
let selectTheme = document.querySelector("#select-theme");
//selects the stylesheet
let style = document.querySelector("#pagestyle");
selectTheme.addEventListener('onchange', () => {
if (selectTheme.value == "dark") {
style.setAttribute("href", "./css/style.css");
}
if (selectTheme.value == "light") {
style.setAttribute("href", "./css/style2.css");
}
console.log(selectTheme.value);
})
HTML:
<link rel="stylesheet" type="text/css" href="" id="pagestyle">
<div class="selection-box">
<select class="select-theme" name="selectTheme" id="select-theme">
<option value="dark" id="dark">dark</option>
<option value="light" id="light">light</option>
</select>
</div>
The even listener itself doesn't seem to work, as it doesn't print out the drop down value.
Also note that this isn't all of my HTML. I just copied and pasted the relevant elements.

The eventlistener is change not onchange
Once you change it your console.log will work
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

Jquery click not working first time when inputs are in focus

Now I have an input when typing in the input it automatically displays a list based on query.
When the 'Favourite' star icon is clicked I want to call some function. Here the problem is when the input is in focus. The first click is not working when input is still in focus. The second time the function is called.
How do I avoid this and make the click work first time even though input is in focus?
let name = 'foo';
jQuery($ => {
$("#search-input").on("change keydown paste input", function() {
if (this.value == "") {
return true;
}
// some filter function on object to loop and display below list.
$(".search-result").append("<li class='searchitem'>" + name + " <i class='favourite far fa-star'></i></li>");
});
$(document).on("click", ".favourite", function() {
alert("hi");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<input type="text" id="search-input" />
<ul class="search-result">
</ul>

Is is possible to have Selectize not dropdown until there are 3 chars entered?

I am using Selectize to search a large set of data that I have in an array locally.
When the user clicks on the Selectize element, it opens right then and tries to show the full list. This is some 3000 items that have to go through my custom render right then.
I would rather that the user has to enter at least 3 chars then show what matches.
I know that there is a "maxOptions" setting, but that still shows the dropdown when the user clicks in. Which is confusing to them, because now I am showing only 100 of the 3000 options.
If possible, I would also like it to not show the dropdown once an option has been selected (this is for maxItems = 1).
Note: I tried to use openOnFocus=false to try to do this, but it seems to only stop the first click from opening the dropdown.
Any ideas on how I can keep Selectize from opening unless the user is typing in a search?

the official examples have one of these see the demo below, hope this is what you were looking for
$('#select-words-length').selectize({
create: true,
createFilter: function(input) {
return input.length >= parseInt($('#length').val(), 10);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.css" rel="stylesheet" />
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Create Filter</h2>
<p>Examples of how to filter created results.</p>
<div class="control-group" style="margin-top:40px">
<label for="length">Minimum Length</label>
<input type="text" id="length" value="2"><br><br>
<label for="select-words-length">Words:</label>
<select id="select-words-length" multiple placeholder="Enter a word longer than the minimum number of characters..."></select>
</div>
</div>
</div>

Modifying open() in the library per OP's own answer did the trick to prevent the dropdown from opening before the desired number of characters. However, if the user hits backspace to shorten the search term, the dropdown remains open.
To fix this, modify the switch statement in the onKeyDown() function:
case KEY_BACKSPACE:
if (self.isOpen) {
self.close();
}
return;

I modified the 'open' function and got this to work.
I added this line after the first line:
var value = self.$control_input.val();
I then added value.length < 3 to the list of checks that cause the open to be ignored.
Works perfectly. I have to say that this code is some of the cleanest 3rd party javascript code I have had the pleasure to work with.

var no_of_char = 1;
function temp() {
var $select = $(document.getElementById('model-select')).selectize({
// ...
// ...
// ...
openOnFocus: false
});
var selectize = $select[0].selectize;
selectize.on('type', function(e) {
if (selectize.$control_input.val().length < no_of_char) {
selectize.close();
}
});
}
temp();
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>
<link href="https://selectize.github.io/selectize.js/css/selectize.css" rel="stylesheet" />
<div id="main">
<select id="model-select">
<option></option>
<option value="0">abc</option>
<option value="1">abcxyz</option>
<option value="2">abcmno</option>
<option value="3">abcpqr</option>
</select>
<br>
</div>

JQuery UI AutoComplete inserts <br> after select

I am using JQuery UI AutoComplete in a content editable div. I am encountering an issue where a <br>-tag is inserted after I select a value from the autocomplete dropdown and I type something in the end of the <div>.
The steps to reproduce are:
Write something
Select something from the autocomplete dropdown
Place cursor at end of content editable div
Insert a space
This results in a <br> tag being inserted at the end of the <div>. How can I prevent this?
http://jsfiddle.net/qf5L0d27/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" contenteditable="true" style="border:1px solid black;width:300px;height:200px"></div>
<script>
$("div").autocomplete({
source: function (request, response){
response(['test1', 'test2']);
},
select: function(event, ui){
el = $("div#main");
old_content = el.html();
extra_content = ui.item.value;
el.html(old_content + extra_content);
el.autocomplete("destroy");
return false;
}
});
</script>

This does not appear to be a problem with autocomplete.
A contenteditable div inserts a <br> or depending on the browser at the end if it loses and regains focus.

target the <h4 id="name"> tag for the dynamically created divs using jquery

I am a total beginner to jquery. and am badly stuck. i would really appreciate if i could get some help with my code.
The scenario is,
- I have a drop down list for the names.
- When i select a name from the list, it should display in the div which is placed beneath the drop down menu. The div will be created automatically via jquery. every item selected from the list will be displayed in its own respective div. The name Sarah should not be included in the drop down list.Its like a stand alone thing. However, when i select an item in the list, the name Sarah is replaced with the selected item.
What i was able to code was --
- I could get the divs with some names associated with it. However, i am unable to target the selected item to its respective div.
I hope it makes sense. I am posting the link to my jsFiddle. Please help.
http://jsfiddle.net/zohana28/0akosx2a/
<div class="part-4">
<select id="sel">
<option value="Cheese">Cheese</option>
<option value="Olives">Olives</option>
<option value="Pepperoni">Pepperoni</option>
<option value="Oregano">Oregano</option>
<option value="Thyme">Thyme</option>
</select>
</div>
<!--end of part 4-->
<div class="main">
<div class="part-2" id="click-1" style="cursor:pointer;">
<div class="part-2-address">
<h4 id="name">sarah</h4>
</div>
</div>
jQuery is:
$(document).ready(function () {
$(document).on('change', '#sel', function (e) {
$('.part-3').html($('.part-2').html());
$('.main').append('<div class = "part-3" > </div>');
var str = $('select option:selected').text();
$('#name').text(str);
console.log(str);
});
return false;
});
thank you in advance.

I've adjusted your Fiddle a bit.
$(document).ready(function () {
$(document).on('change', '#sel', function (e) {
var nameTempl = '<div class="part-2" class="click-1">'
+ '<div class="part-2-address">'
+ '<h4 class="name">{name}</h4></div></div>';
var str = $('select option:selected').text();
$('.main').append(nameTempl.replace(/{name}/, str));
});
return true;
});
For the HTML: I removed the inline-style cursor:pointer; and added it as style for the class .click-1 - previously click-1 and name were ids, I've changed both to be classes. ids have to be unique, so you have to use classes instead.
Though it would be possible to clone() the <div class="part-2" class="click-1"> and then change the name to the current selected option, I just preferred to use the target div as template in the function, with {name} as placeholder to be replaced with the current selected option: nameTempl.replace(/{name}/, str).
Another adjustment that you can change back is - I've set the height:200px; of the .main div to min-height: 200px;, so this container grows when necessary. You can just change this back to height:200px; in case you prefer the yellow div to have a static height like before.
As reference for replace(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace