JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<form id="contact">
    <input type="hidden" id="addr" value="qpp7hv54p63ymld7cpu5fddg8upng4nfjc2nnzvkcf">
    <input type="hidden" id="lega" value="17C8dQfn13p3ZTePwDUV91CstP3gtwrQtc">
    <input type="hidden" id="amoun" value="0.05">
    
    <label>Problemas con <a href="#contact">CashAddr</a>? Prueba con <a href="#contact">Legacy Address</a> </label>  
    
    <select id="word">
    <option value="addr" selected>Cashaddr</option>
    <option value="leg">Legacy</option>
    </select>
</form>
<table width="100%"><tr><td><p id="story"><iframe src="https://chart.googleapis.com/chart?chs=300x300&amp;cht=qr&amp;chl=bitcoincash:qpp7hv54p63ymld7cpu5fddg8upng4nfjc2nnzvkcf?amount=0.05" width="550" height="300" frameborder="0"></iframe></p></td></tr><tr><td>Bitcoin Cash: ฿0.05'</td></tr></table>

JavaScript

var word = document.getElementById("word");
    originalStory = document.getElementById("story");
  var address = document.getElementById("addr");
  var legacy = document.getElementById("lega");
  var amount = document.getElementById("amoun");
		
word.onchange = function(e){
    replaceStory(word.value);
    e.preventDefault();
};

var replaceStory = function(userWord) {
   var comie_fr = '<table width="100%"><tr><td><p id="story"><iframe src="';
   var termi_fr ='" width="500" height="250" frameborder="0"></iframe></p></td></tr></table>';
   var qrl = 'https://chart.googleapis.com/chart?chs=250x250&amp;cht=qr&amp;chl=bitcoincash:';
   
   switch(word.value)
   {case "leg": userWord = comie_fr+qrl+legacy.value+"?amount="+amount.value+termi_fr;break;
    case "addr": userWord= comie_fr+qrl+address.value+"?amount="+amount.value+termi_fr;break;
    }
    
    var story = (userWord);
			
	originalStory.innerHTML = story;
};

var $select = $('#word'),
    $links = $('a[href="#contact"]');

$links.click(function () {
    $select.prop('selectedIndex', $links.index(this) );
});