JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<div id="block">
  <p>株価チェック</p>
  <div>
    <p id="7203"><strong>トヨタ自動車</strong></p>
    <div>銘柄コード：7203</div>
    <div>前日終値：6,740</div> 
  </div>
  <div>
    <p id="9984"><strong>ソフトバンクグループ</strong></p>
    <div>銘柄コード：9984</div>
    <div>前日終値：10,600</div>
  </div>
  <div>
    <p id="9432"><strong>NTT</strong></p>
    <div>銘柄コード：9432</div>
    <div>前日終値：5,003</div>
  </div>
</div>

<input type="text" id="code" onchange="codeCheck()">

<div><span id="output"></span></div>

CSS

input {
  margin-top: 20px;
}
#output {
  font-weight: bold;
  color: red;
}

JavaScript

function codeCheck() {
	var input_value = document.getElementById('code').value;
	var stock_id = document.getElementById(input_value);
  if (stock_id) {
    var parent = stock_id.parentElement;
    var company = parent.firstElementChild;
		var price = parent.lastElementChild;
		var company_text = company.textContent;
		var price_text = price.textContent;

    document.getElementById('output').innerHTML = company_text + "<br>" + price_text;
	} else {
    document.getElementById('output').innerHTML = '銘柄コードがありませんでした';  
  }
}