I want to create a list of "Select" photos that by choosing one I can press a button and add some code to a textarea along with the chosen value.
I wrote this html code with external "JS" file but not being familiar with javascript I don't understand where I'm wrong. I looked around a bit but I only found examples with jquery and that operate on on.change, while I need the value to be entered when the button is pressed plus must add the additional text along with the choice.
I would like to avoid using JQuery for a matter that this code has to run locally without being updated.
function Art_AddFoto() {
var Fotoselect = document.getElementById('art_fotoselect');
var Selectvalue = Fotoselect.options[select.selectedIndex].value;
var TextArea = document.getElementById('i251x');
TextArea.innerText += '<img src="' + Selectvalue + "' alt='Image'>";
});<textarea class="textarea" style="height:200px;" name="art_testo" id="i251x"> </textarea>
<select class="select" name="art_fotoselect" id="art_fotoselect">
<option value="test1">value1</option>
<option value="test2">value2</option>
</select>
<div style="width:40%; display:inline-block;">
<input type="button" name="Art_AddFoto" value="Aggiungi Foto" onclick="Art_AddFoto()" class="button">
</div>Here can be a good start for you:
It use querySelector and EventListener
Art_AddFoto = (e) => {
document.querySelector('#i251x').value += document.querySelector('#art_fotoselect').value+"\r\n";
}
document.querySelector("#Art_AddFotoBtn").addEventListener('click',()=>{
Art_AddFoto(this)
})<textarea class="textarea" style="height:200px;" name="art_testo" id="i251x"></textarea>
<select class="select" name="art_fotoselect" id="art_fotoselect">
<option value="test1">value1</option>
<option value="test2">value2</option>
</select>
<div style="width:40%; display:inline-block;">
<button name="Art_AddFoto"class="button" id="Art_AddFotoBtn">Aggiungi Foto</button>
</div>You are so close!
The only change I had to make to your code was swapping select for Fotoselect:
function Art_AddFoto() {
var Fotoselect = document.getElementById('art_fotoselect');
var Selectvalue = Fotoselect.options[Fotoselect.selectedIndex].value;
var TextArea = document.getElementById('i251x');
TextArea.innerText += '<img src="' + Selectvalue + "' alt='Image'>";
}