Develop Reference

Swap a select text with javascript?

I have a example code here:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
I want to swap se1 and se2 . Here is my code i tried:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
It's work but it require Jquery 1.2.3 but i want to use Jquery 2.1.3. If i change script url to "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" but it isn't work
Thanks for help!

You shouldn't be swapping the values or the text of the two selected items in the lists. You just need to swap which item is selected in each list. Once that is done, that option will have whatever value the list has set up for it.
The version of JQuery you use here doesn't matter since what you are doing requires JQuery operations that have been in JQuery since the beginning.
var sel1 = $("#se1");
var sel2 = $("#se2");
function swap() {
let selection1 = sel1[0].selectedIndex; // Store the first list's selection
sel1[0].selectedIndex = sel2[0].selectedIndex;
sel2[0].selectedIndex = selection1;
// Test
console.log(sel1.val(), sel2.val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>

dynamic create element in javascript and change values

I try to make dynamic inputs, I give labels attribute contenteditable="ture" because if I want to edit content other time, I give for attribute in label and name attribute in input this textContent(label)
function addInput() {
let options = `
<select class="select1">
<option value="">--</option>
<option value="number">number</option>
<option value="text">text</option>
<option value="date">date</option>
<option value="datetime-local">datetime-local</option>
<option value="file">file</option>
<option value="tel">tel</option>
<option value="time">time</option>
<option value="url">url</option>
<option value="month">month</option>
<option value="range">range</option>
<option value="color">color</option>
</select>
<input class="input1" type="text">
<button class="button1">create</button>
`;
document.querySelector('.choose').innerHTML = options;
let button1 = document.querySelector('.button1');
button1.addEventListener('click', function(e) {
e.preventDefault
let select1 = document.querySelector('.select1').value;
let input1 = document.querySelector('.input1').value;
let chooses = [
[select1, input1]
];
chooses.forEach((choose) => {
if (choose !== " ") {
let code = `<div class="relative delete dragthing Nlabel" onclick="addvalue()" ><label for="${choose[1]}" contenteditable="true" class="Vlabel" >${choose[1]}</label><span class="removeElement" onclick="removeElement()"><i class="fa-solid fa-circle-xmark"></i></span><input class="Ninput" name="${choose[1]}" type=${choose[0]} ></div>`;
document.querySelector('.Nform').innerHTML += code;
}
});
});
}
<button onclick="addInput()" class="createElement">create input</button>
<div class="choose"></div>
<div class="Nform" id="dragparent"></div>
my problem in this function frist when I create new input and try to change content, for attribute in label and name attribute in input will change to this content but if create input again and try to change content, for attribute in label and name attribute in input will not change to this content so why my function run one time?
function addvalue() {
let values = document.querySelectorAll('.Vlabel');
console.log(values);
values.forEach(value => {
window.addEventListener('click', () => {
let value2 = document.querySelector('.Vlabel').innerText;
document.querySelector('.Vlabel').setAttribute('for', value2);
document.querySelector('.Ninput').setAttribute('name', value2);
});
});
}

addvalue() should take an argument telling it which DIV it should process. Then it can call methods on that element to find the enclosed Vlabel and Ninput elements.
function addInput() {
let options = `
<select class="select1">
<option value="">--</option>
<option value="number">number</option>
<option value="text">text</option>
<option value="date">date</option>
<option value="datetime-local">datetime-local</option>
<option value="file">file</option>
<option value="tel">tel</option>
<option value="time">time</option>
<option value="url">url</option>
<option value="month">month</option>
<option value="range">range</option>
<option value="color">color</option>
</select>
<input class="input1" type="text">
<button class="button1">create</button>
`;
document.querySelector('.choose').innerHTML = options;
let button1 = document.querySelector('.button1');
button1.addEventListener('click', function(e) {
e.preventDefault
let select1 = document.querySelector('.select1').value;
let input1 = document.querySelector('.input1').value;
let chooses = [
[select1, input1]
];
chooses.forEach((choose) => {
if (choose !== " ") {
let code = `<div class="relative delete dragthing Nlabel" onclick="addvalue(this)" ><label for="${choose[1]}" contenteditable="true" class="Vlabel" >${choose[1]}</label><span class="removeElement" onclick="removeElement()"><i class="fa-solid fa-circle-xmark"></i></span><input class="Ninput" name="${choose[1]}" type=${choose[0]} ></div>`;
document.querySelector('.Nform').innerHTML += code;
}
});
});
}
function addvalue(div) {
console.log("addvalue");
let value2 = div.querySelector('.Vlabel').innerText;
div.querySelector('.Vlabel').setAttribute('for', value2);
div.querySelector('.Ninput').setAttribute('name', value2);
}
<button onclick="addInput()" class="createElement">create input</button>
<div class="choose"></div>
<div class="Nform" id="dragparent"></div>

Button and javascript

Can I add JS in this code? My point is that when I click the button, it will find the car and open the link assigned to it.
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option id="euro" href="mylink" value="euro1">Renault Euro 3</option>
<option id="euro" href="mylink" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick">Search</button>

You need the () after the function name, to call the function.
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option id="euro" href="mylink" value="euro1">Renault Euro 3</option>
<option id="euro" href="mylink" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>
Then inside the function, you use this, to get the selected:
var cars = document.getElementById('cars')
var selectedCar = cars.options[cars.selectedIndex].value;

option element don't have href attribute, but you can send it as data-* attribute and extract it in the JS code. See the example below:
function btnclick() {
let cars = document.getElementById('cars');
let selectedCar = cars.options[cars.selectedIndex];
console.log(selectedCar.getAttribute('data-href'));
}
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option id="euro" data-href="mylink1" value="euro1">Renault Euro 3</option>
<option id="euro" data-href="mylink2" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>

If i use this code it opens in colsole
function btnclick() {
let cars = document.getElementById('cars');
let selectedCar = cars.options[cars.selectedIndex];
console.log(selectedCar.getAttribute('data-href'));
}

You can run with calling javascript like this.
I already give a Javascript Result in this code with data-href inside data-* Attribute
Because you can't input href into a Option Selected bcoz Don't have Attribute
See the example below:
function btnclick() {
let cars = document.getElementById('cars');
let newSelect = cars.options[cars.selectedIndex];
let name = newSelect.getAttribute('data-href');
let result = document.getElementById('result');
result.innerHTML = "<a href='" + name + "'>" + name + "</a>";
}
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option id="euro" data-href="mylink1" value="euro1">Renault Euro 3</option>
<option id="euro" data-href="mylink2" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>
<br>
<br>
<span id="result"></span>

I made like this and it works :D
function btnclick() {
let cars = document.getElementById('cars');
let selectedCar = cars.options[cars.selectedIndex];
window.open(selectedCar.getAttribute('href'));
}

You can test the solution here https://jsfiddle.net/2pz9se0q/3/
HTML
<select class="selecttype" id="cars">
<optgroup label="RENAULT">
<option data-href="mylink1" value="euro1">
Renault Euro 3
</option>
<option data-href="mylink2" value="euro2">
Renault Euro 4
</option>
</optgroup>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>
Note:
1- that I deleted the id="euro", you can not give the same id to many tags
2- option group most be closed by </optgroup>
js
function btnclick() {
let cars = document.getElementById('cars');
let selectedCar = cars.options[cars.selectedIndex];
let link = selectedCar.getAttribute('data-href');
window.open(link, '_blank');
}
Description:
when you click the button the function btnclick() will be fired.
this function will get the element with id cars.
from the element options, it will take the selected option only and save it on selectedCar
by using the element selectedCar we can access the data-href attribute and take the link
to open the link on a new window we added '_blank'
Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window

How can I calculate a number in an input field with a value from a dropdown menu?

I'm trying to create a calculator-like program that takes the number you enter into the first input field and divides it by the number in the dropdown field below it. I'm trying to get a specific percentage of whatever number is entered in the first field.
However, I keep getting "NaN" when it runs. What should I change?
const number = document.getElementById('number');
const percentageSelector = document.getElementById('percentageSelector');
const submitButton = document.getElementById('submitButton');
//The mathematical stuff
submitButton.addEventListener('click', () => {
alert(number * percentageSelector);
});
<h2>Enter number here</h2>
<input type="number" id="number">
<h2>Select a percentage to divide by</h2>
<select id="percentageSelector">
<option selected disabled>Pick one</option>
<option>1%</option>
<option>2%</option>
<option>3%</option>
<option>4%</option>
<option>5%</option>
<option>6%</option>
<option>7%</option>
<option>8%</option>
<option>9%</option>
<option>10%</option>
</select>
<button type="submit" id="submitButton">Submit</button>

The following code ensures that the value of the inputs only get checked when the button is clicked. Values have also been added to each option and the value of the percentageSelector is checked using percentageSelector.selectedOptions[0].value.
I have also made a jsfiddle.
const percentageSelector = document.getElementById('percentageSelector');
const submitButton = document.getElementById('submitButton');
//The mathematical stuff
submitButton.addEventListener('click', () => {
const number = document.getElementById('number').value;
const percentage = percentageSelector.selectedOptions[0].value;
alert(number * percentage);
});
<h2>Enter number here</h2>
<input type="number" id="number">
<h2>Select a percentage to divide by</h2>
<select id="percentageSelector">
<option selected disabled>Pick one</option>
<option value="0.01">1%</option>
<option value="0.02">2%</option>
<option value="0.03">3%</option>
<option value="0.04">4%</option>
<option value="0.05">5%</option>
<option value="0.06">6%</option>
<option value="0.07">7%</option>
<option value="0.08">8%</option>
<option value="0.09">9%</option>
<option value="0.1">10%</option>
</select>
<button type="submit" id="submitButton">Submit</button>

This const percentageSelector = document.getElementById('percentageSelector'); sets percentageSelector to the element not the value of the element. (Ditto "number").
Since the operands are set outside the click function, they will have the values as when the page loaded. You probably want to collect that info after the click, ie inside the function.
The value of a select element is the option that has been selected. The value is going to be the value attribute of the option. But none of the options has a value. Once you add values (as with <option value=".01">, it should be able to "do the math".

so simple.. take care to use numbers and not string values
const numberIn = document.getElementById('number-in')
, percent = document.getElementById('percentage-Selector')
, btCompute = document.getElementById('submit-Button')
;
btCompute.onclick=()=>
{
console.log('percent=', numberIn.valueAsNumber *Number(percent.value) /100)
}
<h2>Enter number here</h2>
<input type="number" id="number-in">
<h2>Select a percentage to divide by</h2>
<select id="percentage-Selector">
<option selected disabled>Pick one</option>
<option value="1">1%</option>
<option value="2">2%</option>
<option value="3">3%</option>
<option value="4">4%</option>
<option value="5">5%</option>
<option value="6">6%</option>
<option value="7">7%</option>
<option value="8">8%</option>
<option value="9">9%</option>
<option value="10">10%</option>
</select>
<button id="submit-Button">Submit</button>

Javascript take number selected in a drop down and times by 1.09?

I need to create a drop down menu containing numbers,
<select>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
</select>
and when a number is selected I want the value to be returned in a <p id="returned-value"></p>tag, but times by 1.09. How can I do that with javascript?

See this fiddle
As you can see in the fiddle, the (selected value * 1.9) is shown in the <p> as soon as a value is selected from the <select>. This is done using onchange. The onchange event occurs when the value of an element has been changed.
HTML
<select id="mySelect" onchange="myFunction()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<p id="demo">0</p>
JS
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x * 1.9;
}

var value = parseInt(document.getElementByTagName('select').value);
var newValue = value * 1.09;
document.getElementById('returned-value').innerHTML = newValue;