HTMLの中身を「ボタンを押したタイミングで」取得したい

Question

###■目的
HTMLをクリックしたとき、その中身を取得し、ラジオボタンの値に挿入したいです。

例えば下記HTMLならば、

「Hello」(bonjour)をクリックしたら、ラジオボタンのvalueを「Hello」(bonjour)にしたい。

ということです。

<div class="word_area">
  <li class="word">Hello</li>
  <li class="word">Bonjour</li>
</div>

<input class='abc' type=radio value='クリック前' checked><span>value=</span><span id="output"></span>

###■ダメだったコード
いろいろ検索して次のように書いてみたのですけれど、きちんと中身を取得してくれず困っております。

//HTMLの中身を取得
document.body.onclick=mess;
function mess(e){
var o=e?e.target:event.srcElement;
if(o.className=='word')

//ラジオボタンのvalueを変更
document.getElementsByClassName("abc")[0].value = o
;}

実際の動きはこちらです。
https://jsfiddle.net/7v3121jb/

どなたか、ただしくHTMLが取得できるような方法をご教示いただけませんでしょうか？
よろしくお願い致します。

Answer 1

ラジオボタンのvalueを「Hello」(bonjour)にしたい。

ラジオボタンにidもnameも振ってないのでclassでやりたいのでしょうか？
それともラジオボタンではなくid=outputの方に書くのでしょうか？

<script>
document.addEventListener('click',function(e){
  var t=e.target;
  if(t.classList.contains("word")){
    document.querySelector("input[type=radio].abc").value=t.textContent;
    document.querySelector("#output").textContent=t.textContent;
  }
});
</script>
<div class="word_area">
<li class="word">Hello</li>
<li class="word">Bonjour</li>
</div>

<input class='abc' type=radio value='クリック前' checked><span>value=</span><span id="output"></span>

Comments

[退会済みユーザー]

失礼いたしました。クラスで指定したかったです。どちらのケースも書いてくださりありがとうございます!!

[退会済みユーザー]

※※メモ※※

ボタンクリックじゃなく初期状態に最初の「.word」を取得しておきたいときはこうしてね↓

■コード
//HTMLの中身を取得
var hoge = document.getElementsByClassName('word')[0];

//ラジオボタンのvalueを変更
setInterval(function(){
document.querySelector("input[type=radio].abc").value = hoge.textContent;
});

■実際の動き
https://jsfiddle.net/7v3121jb/22/