Clash Royale CLAN TAG#URR8PPP

get different url from document.getElementById .setAttribute href

I created a select option with some values, example like this :

function updateinput(e)
var selectedOption = e.options[e.selectedIndex];
document.getElementById('data1').value = selectedOption.getAttribute('data1');
document.getElementById('data2').value = selectedOption.getAttribute('data2');
document.getElementById('data3').value = selectedOption.getAttribute('data3');
document.getElementById('data4').value = selectedOption.getAttribute('data4');
document.getElementById('data5').value = selectedOption.getAttribute('data5');
document.getElementById('data-url').setAttribute('href', 'http://google.com');
document.getElementById('data-url').setAttribute('href', 'http://yahoo.com');


<select>
<option data1='1.000.000' data2='0,-' data3='0,-' data4='0,-' data5='1.000.000' data-url='http://google.com'>30 Day</option>
<option data1='1.500.000' data2='500.000,-' data3='0,-' data4='0,-' data5='2.000.000' data-url='http://yahoo.com'>60 Day</option>
</select>


<input id="data1" name="data1" readonly type="text">
<input id="data2" name="data2" readonly type="text">
<input id="data3" name="data3" readonly type="text">
<input id="data4" name="data4" readonly type="text">
<input id="data5" name="data5" readonly type="text">
<a id="data-url" name="data-url">Anchor</a>

if I choose option 60 the url that is shown is the same: http://google.com

http://google.com

The one that should appear is yahoo.com but I'm confused about how to show or get a different url from same document.getElementById and setAttribute.

yahoo.com

document.getElementById

setAttribute

1 Answer
1

You could read the url value and then add the href attribute accordingly. I'm not sure if this is what you wanted. Have a look!

url

href

function updateinput(e)



var selectedOption = e.target.options[e.target.selectedIndex];
var url = selectedOption.getAttribute('data-url');
var name = selectedOption.getAttribute('data-url-name');
document.getElementById('data1').value = selectedOption.getAttribute('data1');
document.getElementById('data2').value = selectedOption.getAttribute('data2');
document.getElementById('data3').value = selectedOption.getAttribute('data3');
document.getElementById('data4').value = selectedOption.getAttribute('data4');
document.getElementById('data5').value = selectedOption.getAttribute('data5');
document.getElementById('data-url').setAttribute('href', url);
document.getElementById('data-url').innerHTML=name;


<select onChange="updateinput(event)">
<option data1='1.000.000' data2='0,-' data3='0,-' data4='0,-' data5='1.000.000' data-url='http://google.com' data-url-name='Google'>30 Day</option>
<option data1='1.500.000' data2='500.000,-' data3='0,-' data4='0,-' data5='2.000.000' data-url='http://yahoo.com' data-url-name='Yahoo'>60 Day</option>
</select>


<input id="data1" name="data1" readonly type="text">
<input id="data2" name="data2" readonly type="text">
<input id="data3" name="data3" readonly type="text">
<input id="data4" name="data4" readonly type="text">
<input id="data5" name="data5" readonly type="text">
<a id="data-url" name="data-url">Anchor</a>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.