div with innerhtml and variable

Question

I need to put a link inside a div or together with a variable value coming from a function in javascript.

function getRadios(){
    		var radios = $("input[name='radio']:checked").val()
    		return radios;
		}
var resultado = getRadios();
var jogar = document.getElementsById('jogar');

jogar.innerHTML = '<a href="somepage.htm?varName='+ resultado +'">click</a>';

<input type="radio" id="radio1" name="radio" value="1"/>
<input type="radio" id="radio2" name="radio" value="2"/>
<div id="jogar"></div>

I need the radio value to be inserted in the url I'm using ajax.

JakeParis · Accepted Answer · 2020-06-02 20:48:45Z

You can do this pretty easily without jQuery. Just write a function that will get run each time the input is clicked.

const jogar = document.getElementById('jogar');

const radios = document.querySelectorAll('input[name="radio"]');

const setLink = function(val) {
  let link = "somepage.htm?varName=" + val;
  jogar.querySelector('a').setAttribute('href', link);
};

radios.forEach( r => r.addEventListener('change', e => {
  const resultado = e.target.value;
  setLink( resultado );
}));

<input type="radio" id="radio1" name="radio" value="1"/>
<input type="radio" id="radio2" name="radio" value="2"/>
<div id="jogar">
  <a href="#">click</a>
</div>

And here the same thing, but a more compact way to do it:

const jogar = document.getElementById('jogar');
const radios = document.querySelectorAll('input[name="radio"]');
radios.forEach( r => r.addEventListener('change', e => {
  let link = "somepage.htm?varName=" + e.target.value;
  jogar.querySelector('a').setAttribute('href', link);
}));

<input type="radio" id="radio1" name="radio" value="1"/>
<input type="radio" id="radio2" name="radio" value="2"/>
<div id="jogar">
  <a href="#">click</a>
</div>

Mateusz Krawczyk · Accepted Answer · 2020-06-02 20:47:11Z

0

I think your problem is, that you run this code once on page load. You should run t every time radio is changed.

function getRadios(){
    var radios = document.querySelector("input[name='radio']:checked").value;
    return radios;
}
document.querySelectorAll("input[name='radio']").forEach(x => x.onchange = () => { 
    var resultado = getRadios();
    var jogar = document.getElementsById('jogar');
    jogar.innerHTML = '<a href="somepage.htm?varName='+ resultado +'">click</a>';
});

answered Jun 2, 2020 at 20:47

Mateusz Krawczyk

3081 silver badge8 bronze badges

Collectives™ on Stack Overflow

div with innerhtml and variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related