I’m trying to do a money converter, with only a few currencies and putting the exchange rate by hand because y don’t know yet how to link a real currency exchange.
So i made this code, but it’s not working, i know that the event.listner is wrong, but i don`t know how to make it work. I tried to see if the currency exchange worked using an onclick function on the button but i get the same result always, it’s not changing currency, it gives the message “We can’t change that currency”
This is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convertidor</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="moneda.css">
</head>
<body>
<form>
<label for="exampleDataList" class="form-label">First currency</label>
<input class="inputMoney" list="money" id="money1" placeholder="€,$,£,">
<datalist id="money">
<option value="Euro">
<option value="Dolar">
<option value="Pound">
</datalist>
<label for="exampleDataList" class="form-label">Second Currency</label>
<input class="inputMoney" list="moneyConverted" id="money2" placeholder="€,$,£,">
<datalist id="moneyConverted">
<option value="Euro">
<option value="Dolar">
<option value="Pound">
</datalist>
<br>
<label>Amount:</label>
<input type="text" id="amount" />
<button type="button" id="convert">Convert</button>
<p id="result"></p>
</form>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="moneda.js"></script>
</body>
</html>
const money1 = document.getElementById('money1').value;
const money2 = document.getElementById('money2').value
const amount = document.getElementById('amount');
const converted = document.getElementById('result');
function change(){
if(money1 === 'Euro' && money2 === 'Dolar'){
const result = document.getElementById('result').innerHTML = 'El cambio es' + money1 * 1.05
}else if(money1 === 'Euro' && money2 ==='Libra'){
const result = document.getElementById('result').innerHTML = 'El cambio es' + money1 * 1.05
}else if(money1 === 'Dolar' && money2 ==='Euro'){
const result = document.getElementById('result').innerHTML = 'El cambio es' + money1 * 1.05
}else if(money1 === 'Dolar' && money2 ==='Libra'){
const result = document.getElementById('result').innerHTML = 'El cambio es' + money1 * 1.05
}else if(money1 === 'Libra' && money2 ==='Euro'){
const result = document.getElementById('result').innerHTML = 'El cambio es' + money1 * 1.05
}else if(money1 === 'Libra' && money2 ==='Dolar'){
const result = document.getElementById('result').innerHTML = 'El cambio es' + money1 * 1.05
}else{
const result = document.getElementById('result').innerHTML = "We can't change that currency"
}
}
const currencyButton = document.getElementById('amount');
currencyButton.addEventListener('click', function change(){
})
