I'm a newbie in JS. I want to change the background image of a div by using values from tag. I can change the background-color but now I want to use the value as the name of a jpg file. Does anyone know how? The values will be 1,2,3 and the name of the graphic files are 1.jpg, 2.jpg and 3.jpg.
<div class="container" id="wrapper">
<form>
<label for="my-select">Choose the continent: </label>
<select
name=""
id="my-select"
value="Choose the continent"
onChange="myFunction()"
>
<option value="default">default</option>
<option value="1">Asia</option>
<option value="2">Australia</option>
<option value="3">South america</option>
</select>
</form>
</div>
const myWrapper = document.querySelector("#wrapper");
function myFunction() {
var x = document.getElementById("my-select").value;
myWrapper.style.backgroundImage = url("images/x.jpg");
}
// I know the last line won't work.
You were close, try something like this:
const myWrapper = document.querySelector("#wrapper");
function myFunction() {
var x = document.getElementById("my-select").value;
myWrapper.style.backgroundImage = "url(images/" + x + ".jpg)";
}
<div class="container" id="wrapper">
<form>
<label for="my-select">Choose the continent: </label>
<select
name=""
id="my-select"
value="Choose the continent"
onChange="myFunction()"
>
<option value="default">default</option>
<option value="1">Asia</option>
<option value="2">Australia</option>
<option value="3">South america</option>
</select>
</form>
</div>
If you want even more readable code, you can use template literals instead of string concatenation, like this:
myWrapper.style.backgroundImage = `url(images/${x}.jpg)`;
Your Solution is mostly correct. You only needed to insert the entire string to the CSS-Styling, as you would normally in CSS.
You then needed to concatenate the X-Value to the string, so it gets the number stored in it instead of the x as a direct character.
const myWrapper = document.querySelector("#wrapper");
function myFunction() {
var x = document.getElementById("my-select").value;
// You'll need to insert the CSS-Style as an entire string.
// We concatenate the Variable X to the string, so it gets dynamicly used.
myWrapper.style.backgroundImage = "url('images/"+x+".jpg')";
}
Related
i have problem plz help
when i click on button it pass just an array(speaker) without any other parameters(sub,compose)
i try to sent just the parameter (sub,compose) but its does not pass,
i need when i click button pass all(array(speaker) and (sub,compose)
this is hrml code
<multi-input>
<input list="speakers">
<datalist id="speakers">
<option value="Banquo"></option>
<option value="Bishop Stokesly of London"></option>
<option value="Caesar’s Second Watchman"></option>
<option value="Celia"></option>
<option value="Cleopatra"></option>
<option value="Dogberry"></option>
<option value="Falstaff"></option>
<option value="First Servant"></option>
<option value="Hamlet"></option>
<option value="Juliet"></option>
<option value="Macbeth"></option>
</datalist>
</multi-input>
<div class="form-group">
<input class="form-control" placeholder="Subject:" id="sub">
</div>
<div class="form-group">
<textarea id="compose" class="form-control" style="height: 300px">
<button type="submit" name="submit" class="btn btn-primary" id="get"><i class="far fa-envelope"></i> Send</button>
and this is js code
const getButton = document.getElementById('get');
var sub = document.getElementById('sub').value;
var compose= document.getElementById('compose').value;
const multiInput = document.querySelector('multi-input');
getButton.onclick = () => {
var src="sent.php?sub="+multiInput.getValues()+'&sub='+sub+'&compose='+compose+'';
window.location.href=src;
}
just the array (multi-input) pass the other not whay ?
To specify your array as URL parameters, you need to add "[]" before "=" sign. In that way php recognizes it as array. Otherwise the value will be just a string.
/*------ Change This -------*/
var src="sent.php?sub="+multiInput.getValues()+'&sub='+sub+'&compose='+compose+'';
window.location.href=src;
/*----- To this -------*/
var src="sent.php?sub[]="+multiInput.getValues()+'&sub='+sub+'&compose='+compose+'';
window.location.href=src;
Secondly, since your 'onclick' function does not update the values of variables you've defined above; it just not get the latest value of them. To solve this issue moving variables inside the function is enough.
const getButton = document.getElementById('get');
const multiInput = document.querySelector('multi-input');
getButton.onclick = () => {
/*----- Define them in here -------*/
var sub = document.getElementById('sub').value;
var compose= document.getElementById('compose').value;
var src="sent.php?sub="+multiInput.getValues()+'&sub='+sub+'&compose='+compose+'';
window.location.href=src;
}
I have a datalist with "values" and "data-values". I've managed to display only values (Auckland, Bangkok) in a select. That works as needed.
But I need to pass "data-value" to another input at the moment when option (select) is changed.
I have almost zero programming skills. I have tried to ad ´attr("data-value")´ and ´$(this).data("id")´ to my code, but it doesnt work. Another input is either empty, or "undefined" is displayed, when I change value from datalist.
<input list="shop_ids" id="listshops" name="shop_id" onchange="this.form.f_shop_hidden.value=this.form.shop_id.value" />
<datalist id="shop_ids">
<option data-value="1" value="Auckland"></option>
<option data-value="2" value="Bangkok"></option>
<option data-value="3" value="Sydney"></option>
</datalist>
<!-- Text field, where data-value should be displayed -->
<input type="text" name="f_shop_hidden" id="f_shop_hidden">
Once I click on a datalist and select Auckland, "Auckland" (value) is displayed in "f_shop_hidden" input. I need to display number "1" there (data-value).
I have been trying to crack this nut the whole week. Thank you very much. :)
You can do something like this:
const select = this.form.shop_id;
const dataValue = select.options[select.selectedIndex].dataset.value;
console.log(dataValue);
You can do something like this :
$('#listshops').on('input', function() {
const value = $(this).val();
const data_value = $('#shop_ids [value="' + value + '"]').data('value');
document.getElementById("f_shop_hidden").value = data_value;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input list="shop_ids" id="listshops" name="shop_id"/>
<datalist id="shop_ids">
<option data-value="1" value="Auckland"></option>
<option data-value="2" value="Bangkok"></option>
<option data-value="3" value="Sydney"></option>
</datalist>
<!-- Text field, where data-value should be displayed -->
<input type="text" name="f_shop_hidden" id="f_shop_hidden">
I edited the answer for data list.
Call a JavaScript function when input Changes. There you could access the data list id and then assign to the textbox.
<!-- HTML Part -->
<input list="shop_ids" id="listshops" name="shop_id" onchange="idDisplay();" />
<datalist id="shop_ids">
<option data-value="1" value="Auckland"></option>
<option data-value="2" value="Bangkok"></option>
<option data-value="3" value="Sydney"></option>
</datalist>
<!-- Text field, where data-value should be displayed -->
<input type="text" name="f_shop_hidden" id="f_shop_hidden">
<!-- JAVASCRIPT Part -->
<script>
function idDisplay()
{
var element_input = document.getElementById('listshops');
var element_datalist = document.getElementById('shop_ids');
var opSelected = element_datalist.querySelector(`[value="${element_input.value}"]`);
var id = opSelected.getAttribute('data-value');
document.getElementById("f_shop_hidden").value = id;// Assigns data-value to textbox
}
</script>
This question already has answers here:
Get selected option text with JavaScript
(16 answers)
Closed 4 years ago.
I am fairly new to Javascript programming. I would like to get the selected value from the list of values presented to the customer. I want to display this as a simple text saying, the selection was from the options provided. Let me paste the code snippet
<span id="Step2" style="display:none">
<form>
<fieldset>
<legend>Type of Customization</legend>
<p>
<label>Available Customization</label>
<select id = "myCust">
<option value = "1">New Dimension Table</option>
<option value = "2">Add a Fact Table</option>
<option value = "3">Completely New Form</option>
<option value = "4">Edit an Old Form</option>
<option value = "5">Others</option>
</select>
</p>
</fieldset>
</form>
so from the provided options, if the person chooses, say, "Completely New Form" I would like to display that into the HTML
I tried
document.getElementById("myCust")
but that won't work.
function getCust() {
var typeofCust = document.getElementById("myCust");
var cust = typeofCust.querySelector('option[value="'+typeofCust.value+'"]');
document.getElementById('selected-customer').innerText=cust.innerText;
}
document.getElementById('myCust')
.addEventListener('change', getCust)
<div id="FooterTableStep2" style="background-color:Silver">
Selected Customization : <span id="selected-customer"></span>
</div>
<form>
<fieldset>
<legend>Type of Customization</legend>
<p>
<label>Available Customization</label>
<select id="myCust">
<option value="1">New Dimension Table</option>
<option value="2">Add a Fact Table</option>
<option value="3">Completely New Form</option>
<option value="4">Edit an Old Form</option>
<option value="5">Others</option>
</select>
</p>
</fieldset>
</form>
getElementById returns the actual HTML element object.
const selectEl = document.getElementById('myCust');
const customer = selectEl.value;
console.log(customer); // selected value
It's also worth noting that most elements can also query their children
const row = document.querySelector('td:nth-child(13)');
const selectEl = row.getElementById('some-id');
Updated to include your comment:
<td id="FooterTableStep2" style="background-color: silver;">
Selected Customization: <span id="selected-customer"></span>
</td>
<script>
function getCust() {
var typeofCust = document.getElementById("myCust");
var cust = typeofCust.querySelector('option[value="' + typeofCust.value + '"]');
document.getElementById('selected-customer').innerText = cust.innerText;
}
</script>
I have an understanding or css and html, but I'm quite new to JavaScript...
So, I have a div that has two functions. (var selection = a[selection].innerHTML;) is where the problem is, and I'm trying to get (bread)(milk)(cheese)
My HTML
function PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV_MOUSEDOWN() {
//disable div
var PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV = document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV');
var a = PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV.getElementsByTagName("a");
var selection = a[selection].innerHTML;
console.log("select = " + selection);
document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER').value = selection;
PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV.style.cssText = 'display: none;';
}
<input type="text" class="CAPTURE_TB" placeholder="ACCOUNT NUMBER" id="PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER">
<div id="PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV" class="CAPTURE_SEARCH" style="display:none;">
CHEESE
MILK
BREAD
</div>
In the HTML, I'm pulling the page with...
<script>
require('./UniWindow.js')
</script>
Inside 'UniWindow.js':
//PP_BUDGET_CLIENT_CONTROLLS
var PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER = document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER');
//divs
var PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV = document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV');
//PP_BUDGET_CLIENT_EVENTS
PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER.addEventListener('keyup', PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_ONKEYUP);
PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV.addEventListener('mousedown', PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV_MOUSEDOWN)
//PP_BUDGET_CLIENT_FUNCTIONS
so #chrisG suggested
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
but electron does not support this feature. so I have created my own but if anyone could help even if i can somehow pass the variable to the method in the background.
You need to create function that assign some variable or just set you div value to text of selection and bind that function to each option onClick.
<input type="text" class="CAPTURE_TB" placeholder="ACCOUNT NUMBER" id="PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER">
<div id="PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER_SEARCHDIV" class="CAPTURE_SEARCH" style="display:block;">
<a name="test" href="#CHEESE" >CHEESE</a>
<a name="test" href="#MILK" >MILK</a>
<a name="test" href="#BREAD" >BREAD</a>
</div>
<script>
function Choose(){
document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER').value = this.text;
}
var elements = document.getElementsByName("test");
for (var i = 0; i < elements.length; i++)
{
elements[i].addEventListener("click", Choose, false);
}
</script>
Possible duplicate of: setting content between div tags using javascript
Try this:
document.getElementById('PP_BUDGET_CLIENT_TB_ACCOUNT_NUMBER').innerHTML = selection;
I'm very new to javascript and I'm trying to make different events occur depending on types of input. I have the following in my html header:
<script type="text/javascript">
function validateForm(){
var val=document.getElementsByName("destination");
if (val == "deprecated"){
window.location="http://website.com/";
}
}
</script>
Then in the body, I have the following:
<select name="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select><br/>
<input type="button" value="next >" onClick="validateForm()" />
This however doesn't do anything. It just stays on the same page. I also tried wrapping it inside a form tag by saying:
<form name="my_form" onSubmit="validateForm()">
...
</form>
and then having matching javascript:
var val = document.forms["my_form"]["destination"].value
But this didn't work either.
Anyone see what the issue is?
Thanks.
I fixed your function and tested it:
function validateForm(){
var val=document.getElementsByName("destination");
var theSelectedOption = val[0].options[val[0].selectedIndex].value;
if (theSelectedOption == "deprecated"){
window.location="http://website.com/";
}
}
You need to grab the value from the selected element. Since document.getElementsByName returns an array, try using this
var val = document.getElementsByName("destination")[0].value
You need to get the value from the selected option. Like so:
var index = document.getElementsByName("destination").selectedIndex;
var val=document.getElementsByName("destination").options[index].value;
That will retrieve the value of the selected option.
You're missing the href attribute, you want to use:
window.location.href = 'URL';
do the following
<select name="destination" id="destination">
Your JavaScript
val=document.getElementsById("destination").value;
Put an alert(val) in your if to see if ever evaluates to true
Try this with a little bit of jquery
Redirect using drop down
<form name="my_form">
<select id="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select><br/>
<input type="button" value="next >" id="submit">
</form>
$('#submit').click(
function validateForm(){
var e = document.getElementById("destination");
var val = e.options[e.selectedIndex].value;
if (val == "deprecated"){
window.location="http://website.com/";
}
});
Try it with id's instead of name, an id is a unique element. Javascript supports
var destination = document.getElementById("destination");
if (destination.options[destination.selectedIndex].value == "deprecated"){
window.location="http://website.com/";
}
HTML
<select id="destination">
<option value="current_builds">Current Builds</option>
<option value="deprecated">Deprecated Files</option>
<option value="mailing_list">Mailing List</option>
</select>
<br />
<input type="button" value="next >" onclick="javascript:validateForm();" />