Proponuje dopisać: toLowerCase()
const kraj = document.getElementById("nazwa").value.trim().toLowerCase();
co do pytania na początek np. tak
if (kraj == "polska") {
document.getElementById("populacja").innerText = polska[0];
document.getElementById("pkb").innerText = polska[1];
document.getElementById("połozenie").innerText = polska[2];
document.getElementById("prezydent").innerText = polska[3];
document.getElementById("ustrój").innerText = polska[4];
document.getElementById("sojusz").innerText = polska[5];
document.getElementById("waluta").innerText = polska[6];
document.getElementById("rok").innerText = polska[7];
}
Przez użycie { } kod jest bardziej czytelny, ponieważ grupuje wszystkie instrukcje przypisania dla danego kraju (tu Polska) w jednym bloku dla jednego if-a.
lub np. tak
Pobieramy wszystkie div-y, które znajdują sie we wnętrzu div id="dane"
const dane = document.querySelectorAll("#dane div");
<div id="dane">
<div id="populacja">populacja:</div>
<div id="pkb">pkb:</div>
<div id="połozenie">połozenie:</div>
<div id="prezydent">prezydent:</div>
<div id="ustrój">ustrój:</div>
<div id="sojusz">Sojusz:</div>
<div id="waluta">Waluta:</div>
<div id="rok">Rok:</div>
</div>
const kraj = document.getElementById("nazwa").value.trim().toLowerCase();
const dane = document.querySelectorAll("#dane div");
if (kraj == "polska") {
for (let indeks=0; indeks<dane.length; indeks++) {
dane[indeks].innerText = polska[indeks];
}
}
lub np. tak
const kraj = document.getElementById("nazwa").value.trim().toLowerCase();
const dane = document.querySelectorAll("#dane div");
if (kraj == "polska") {
for (const [indeks, div] of [...dane].entries()) {
div.innerText = polska[indeks];
}
}
Przekształcenie wyniku querySelectorAll w tablicę za pomocą spread operatora [...], a następnie użycie metody entries() do uzyskania iteratora, który zwraca pary [indeks, wartość]. Dzięki temu możesz użyć tej pary do przypisania wartości polska[indeks] do innerText (sprawdź też textContent) dla każdego wiersza div.
BTW,
1. czemu nie zwalić więcej roboty na komputer (przeglądarkę)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<style>
#dane div {
font-weight: bold;
}
#dane div span {
font-weight: normal;
}
#dane div:nth-child(even) {
background-color: rgba(0,0,0,.15);
}
</style>
</head>
<body>
<input type="text" id="nazwa">
<br><br>
<input type="button" value="pokaz dane" onclick="pokaz_dane_kraju()">
<div id="dane"></div>
</body>
</html>
function pokaz_dane_kraju()
{
const polska = ['populacja:37milionów','pkb:679,4 miliarda USD ','połozenie:Europa sródkowa',
'prezydent:Andziej Duda','ustrój:Demokracja','Sojusz:Unia Europerska/Nato','Waluta:Zł','Rok:2021'];
// reszta kodu
const kraj = document.getElementById('nazwa').value.trim().toLowerCase();
const dane_lista = document.querySelector('#dane');
let html_lista = '';
if (kraj == 'polska') {
for (const dane of polska) {
html_lista += `<div>${dane.split(':')[0]}: <span>${dane.split(':')[1]}</span></div>`;
}
}
if (kraj == 'niemcy') {
for (const dane of niemcy) {
html_lista += `<div>${dane.split(':')[0]}: <span>${dane.split(':')[1]}</span></div>`;
}
}
// reszta kodu
dane_lista.insertAdjacentHTML('beforeend', html_lista);
}
2. cały przedstawiony przez Ciebie kod
function pokaz_dane_kraju()
{
const polska = ["populacja:37milionów","pkb:679,4 miliarda USD ","połozenie:Europa sródkowa","prezydent:Andziej duda","ustrój:Demokracja","Sojusz:Unia Europerska/Nato","Waluta:Zł","Rok:2021"];
const niemcy = ["populacja:83,2 milionów","pkb:4,26 tryliardów USD","połozenie:sródkowa Europa ","prezydent:Frank-Walter Steinmeier","ustrój:Demokracja ","sojusz:Unia Europerska/Nato ","Waluta:Euro","rok:2021"];
const francja = ["populacja:67,75 miliona","pkb:2,958 tryliarda USD","połozenie:Europa zachodnia","prezydent:Emmanuel macron","ustrój:Demokracja","sojusz:Unia Europejska/nato","Waluta:Euro","rok:2021"];
const usa = ["populacja:331,9 miliona","pkb:23,32 tryliarda USD,","połozenie:Ameryka północna ","prezydent:Joe Biden","ustrój:Demokratyczna republika","sojusz:Nato","Waluta:dolar","rok:2021"];
const rosja = ["populacja:143,4 miliona","pkb:1,779 tryliarda ","połozenie:północną Azję i północno-wschodnią i wschodnią część Europy,","prezydent:putin","ustrój:demokratyczny","sojusz:Jest członkiem wielu międzynarodowych organizacji, m.in. jednym z pięciu stałych członków Rady Bezpieczeństwa ONZ, G20, Euroazjatyckiej Unii Gospodarczej, Wspólnoty Niepodległych Państw, Szanghajskiej Organizacji Współpracy i odgrywa znaczącą rolę w polityce światowej.","Waluta:Ruble","rok:2021"];
const Unia_Europejska = ["populacja:448,4 mln","pkb:14,5 bln euro.","połozenie:Europa","prezydent:brak","ustrój:Demokracja","sojusz:on and czesciowo nato","Waluta:Euro","rok:2021"];
const kraj = document.getElementById("nazwa").value.trim();
if (kraj == "Polska") document.getElementById("populacja").innerText= polska[0];
if (kraj == "Polska") document.getElementById("pkb").innerText= polska[1];
if (kraj == "Polska") document.getElementById("połozenie").innerText= polska[2];
if (kraj == "Polska") document.getElementById("prezydent").innerText= polska[3];
if (kraj == "Polska") document.getElementById("ustrój").innerText= polska[4];
if (kraj == "Polska") document.getElementById("sojusz").innerText= polska[5];
if (kraj == "Polska") document.getElementById("waluta").innerText= polska[6];
if (kraj == "Polska") document.getElementById("rok").innerText= polska[7];
if (kraj == "Niemcy") document.getElementById("populacja").innerText= niemcy[0];
if (kraj == "Niemcy") document.getElementById("pkb").innerText= niemcy[1];
if (kraj == "Niemcy") document.getElementById("połozenie").innerText= niemcy[2];
if (kraj == "Niemcy") document.getElementById("prezydent").innerText= niemcy[3];
if (kraj == "Niemcy") document.getElementById("ustrój").innerText= niemcy[4];
if (kraj == "Niemcy") document.getElementById("sojusz").innerText= niemcy[5];
if (kraj == "Niemcy") document.getElementById("waluta").innerText= niemcy[6];
if (kraj == "Niemcy") document.getElementById("rok").innerText= niemcy[7];
if (kraj == "Francja") document.getElementById("populacja").innerText= francja[0];
if (kraj == "Francja") document.getElementById("pkb").innerText= francja[1];
if (kraj == "Francja") document.getElementById("połozenie").innerText= francja[2];
if (kraj == "Francja") document.getElementById("prezydent").innerText= francja[3];
if (kraj == "Francja") document.getElementById("ustrój").innerText= francja[4];
if (kraj == "Francja") document.getElementById("sojusz").innerText= francja[5];
if (kraj == "Francja") document.getElementById("waluta").innerText= francja[6];
if (kraj == "Francja") document.getElementById("rok").innerText= francja[7];
if (kraj == "Usa") document.getElementById("populacja").innerText= usa[0];
if (kraj == "Usa") document.getElementById("pkb").innerText= usa[1];
if (kraj == "Usa") document.getElementById("połozenie").innerText= usa[2];
if (kraj == "Usa") document.getElementById("prezydent").innerText= usa[3];
if (kraj == "Usa") document.getElementById("ustrój").innerText= usa[4];
if (kraj == "Usa") document.getElementById("sojusz").innerText= usa[5];
if (kraj == "Usa") document.getElementById("waluta").innerText= usa[6];
if (kraj == "Usa") document.getElementById("rok").innerText= usa[7];
if (kraj == "Rosja") document.getElementById("populacja").innerText= rosja[0];
if (kraj == "Rosja") document.getElementById("pkb").innerText= rosja[1];
if (kraj == "Rosja") document.getElementById("połozenie").innerText= rosja[2];
if (kraj == "Rosja") document.getElementById("prezydent").innerText= rosja[3];
if (kraj == "Rosja") document.getElementById("ustrój").innerText= rosja[4];
if (kraj == "Rosja") document.getElementById("sojusz").innerText= rosja[5];
if (kraj == "Rosja") document.getElementById("waluta").innerText= rosja[6];
if (kraj == "Rosja") document.getElementById("rok").innerText= rosja[7];
if (kraj == "Unia Europejska") document.getElementById("populacja").innerText= Unia_Europejska[0];
if (kraj == "Unia Europejska") document.getElementById("pkb").innerText= Unia_Europejska[1];
if (kraj == "Unia Europejska") document.getElementById("połozenie").innerText= Unia_Europejska[2];
if (kraj == "Unia Europejska") document.getElementById("prezydent").innerText= Unia_Europejska[3];
if (kraj == "Unia Europejska") document.getElementById("ustrój").innerText= Unia_Europejska[4];
if (kraj == "Unia Europejska") document.getElementById("sojusz").innerText= Unia_Europejska[5];
if (kraj == "Unia Europejska") document.getElementById("waluta").innerText= Unia_Europejska[6];
if (kraj == "Unia Europejska") document.getElementById("rok").innerText= Unia_Europejska[7];
}
// ??
["populacja:","pkb:","połozenie:","prezydent:","ustrój","sojusz:","Waluta:","rok:"];
można skrócić do jednej tablicy, jednego if-a i jednej pętli.