クイックで一度に1つの要素を表示する方法

一度に1つの質問のみを表示するにはどうすればよいですか？ '次へ'と '前へ'ボタンを追加する。私はまだJavascriptの初心者ですが、私はこれに対する答えを見つけることができません。

<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>What kind of car should I buy?</title> 
    <link rel="stylesheet" href="stylesheet.css" type="text/css"> 
    </head> 
    <body> 
    <h1>What kind of car should I buy?</h1> 
    <p id="suggestion"></p> 

    <form id="form" action=""> 
    <p>What size do you need?</p> 
    <input type="radio" name="size" value="compact">Compact<br> 
    <input type="radio" name="size" value="mid">Midsize<br> 
    <input type="radio" name="size" value="small">Small SUV<br> 
    <input type="radio" name="size" value="med">Medium SUV<br> 
    <input type="radio" name="size" value="big">Big SUV 

    <p>What kind of driving will you be doing?</p> 
    <input type="radio" name="drive" value="city">City/suburb driving<br> 
    <input type="radio" name="drive" value="mountain">Mountain driving 

    <p>Which would you rather have?</p> 
    <input type="radio" name="mpg" value="gas">Good gas milage<br> 
    <input type="radio" name="mpg" value="performance">Performance 

    <p>How much do luxury features matter to you?</p> 
    <input type="radio" name="money" value="save">I'd rather save money and have less luxury features<br> 
    <input type="radio" name="money" value="luxury">I'd rather spend a little more and have luxury features. 

    <p><input id="submit" type="submit" value="submit"></p> 
    </form> 

    </body> 
</html>

そして、これはそれを管理するためのいくつかの方法があり、私のJavascript

const types = { 
    size: { 
    compact: 'compact', 
    mid: 'mid', 
    small: 'small', 
    med: 'med', 
    big: 'big' 
    }, 
    drive: { 
    city: 'city', 
    mountain: 'mountain' 
    }, 
    mpg: { 
    gas: 'gas', 
    performance: 'performance' 
    }, 
    money: { 
    save: 'save', 
    luxury: 'luxury' 
    } 
}; 

const cars = [ 
    { 
    car: 'Prius', 
    requirements: { 
     size: types.size.compact, 
     drive: types.drive.city, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'BMW i-3', 
    requirements: { 
     size: types.size.compact, 
     drive: types.drive.city, 
     mpg: types.mpg.gas, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Civic SI', 
    requirements: { 
     size: types.size.compact, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'BMW 328', 
    requirements: { 
     size: types.size.compact, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Mini Cooper All4', 
    requirements: { 
     size: types.size.compact, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'BMW 328 XI', 
    requirements: { 
     size: types.size.compact, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'BMW XI', 
    requirements: { 
     size: types.size.compact, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Subaru Impreza', 
    requirements: { 
     size: types.size.compact, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.save 
    } 
    }, 

    { 
    car: 'Accord Hybrid', 
    requirements: { 
     size: types.size.mid, 
     drive: types.drive.city, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'BMW 528', 
    requirements: { 
     size: types.size.mid, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'VW CC', 
    requirements: { 
     size: types.size.mid, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Subaru Legacy', 
    requirements: { 
     size: types.size.mid, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'BMW 528 XI', 
    requirements: { 
     size: types.size.mid, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Dodge Charger AWD', 
    requirements: { 
     size: types.size.mid, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Audi A4 Quattro', 
    requirements: { 
     size: types.size.mid, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 

    { 
    car: 'Rav4 Hybrid', 
    requirements: { 
     size: types.size.small, 
     drive: types.drive.city, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Buick Encore', 
    requirements: { 
     size: types.size.small, 
     drive: types.drive.city, 
     mpg: types.mpg.gas, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Mazda CX-5', 
    requirements: { 
     size: types.size.small, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'BMW X3', 
    requirements: { 
     size: types.size.smal, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Honda CR-V AWD', 
    requirements: { 
     size: types.size.small, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Buick Encore AWD', 
    requirements: { 
     size: types.size.small, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Mazda CX-5 AWD', 
    requirements: { 
     size: types.size.small, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'BMW X3 AWD', 
    requirements: { 
     size: types.size.small, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 

    { 
    car: 'Highlander Hybrid', 
    requirements: { 
     size: types.size.med, 
     drive: types.drive.city, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Buick Enclave', 
    requirements: { 
     size: types.size.med, 
     drive: types.drive.city, 
     mpg: types.mpg.gas, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Mazda CX-7', 
    requirements: { 
     size: types.size.med, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'BMW X5', 
    requirements: { 
     size: types.size.med, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Honda Pilot AWD', 
    requirements: { 
     size: types.size.med, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Buick Enclave AWD', 
    requirements: { 
     size: types.size.med, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Mazda CX-7 AWD', 
    requirements: { 
     size: types.size.med, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.money 
    } 
    }, 
    { 
    car: 'BMW X5 AWD', 
    requirements: { 
     size: types.size.med, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 

    { 
    car: 'Chevy Tahoe', 
    requirements: { 
     size: types.size.big, 
     drive: types.drive.city, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Audi A7', 
    requirements: { 
     size: types.size.big, 
     drive: types.drive.city, 
     mpg: types.mpg.gas, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Chevy Tahoe', 
    requirements: { 
     size: types.size.big, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Cadallac Escalade', 
    requirements: { 
     size: types.size.big, 
     drive: types.drive.city, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Chevy Tahoe 4WD', 
    requirements: { 
     size: types.size.big, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Infiniti QX80 4WD', 
    requirements: { 
     size: types.size.big, 
     drive: types.drive.mountain, 
     mpg: types.mpg.gas, 
     money: types.money.luxury 
    } 
    }, 
    { 
    car: 'Ford Expedition 4WD', 
    requirements: { 
     size: types.size.big, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.save 
    } 
    }, 
    { 
    car: 'Caddalac Escalade 4WD', 
    requirements: { 
     size: types.size.big, 
     drive: types.drive.mountain, 
     mpg: types.mpg.performance, 
     money: types.money.luxury 
    } 
    }, 
]; 

const getElements =() => { 
    const checkedValue = selector => (
    document.querySelector('input[name = "' + selector + '"]:checked').value 
); 

    return { 
    size: checkedValue('size'), 
    drive: checkedValue('drive'), 
    mpg: checkedValue('mpg'), 
    money: checkedValue('money'), 
    submit: document.getElementById("submit"), 
    suggestion: document.getElementById("suggestion") 
    }; 
} 

function submit(event) { 
    event.preventDefault(); 

    const { 
    size, 
    drive, 
    mpg, 
    money, 
    suggestion 
    } = getElements(); 

    const result = cars.find(({ 
    requirements 
    }) => (
    requirements.size === size && 
    requirements.drive === drive && 
    requirements.mpg === mpg && 
    requirements.money === money 
)); 

    suggestion.innerHTML = result.car; 
} 

document.getElementById("form").addEventListener("submit", submit);

出典

2017-04-25 Eyad

です。私は1つの解決策を説明しようとしますが、私はStackOverflowの範囲だとは思わないので、完全なスクリプトソリューションを提供することはできません。

まず、HTMLタグでさまざまな質問をグループ化することです。ほとんどの場合、divタグは例えば、良い選択です：

<div id="question1"> 
    <p>What size do you need?</p> 
    <input type="radio" name="size" value="compact">Compact<br> 
    <input type="radio" name="size" value="mid">Midsize<br> 
    <input type="radio" name="size" value="small">Small SUV<br> 
    <input type="radio" name="size" value="med">Medium SUV<br> 
    <input type="radio" name="size" value="big">Big SUV 
</div>

その後、あなたが必要としないのdivのを隠しクラスを使用します。代わりに、フォームの

/* CSS */ 
.hidden { 
    display: none; 
} 

<!-- HTML --> 
<div id="question2" class="hidden">...</div> 
<div id="question3" class="hidden">...</div>

を、フォームを置き換えることができますタグを付けてボタンを追加します。最初のボタン（前）が非表示になり、もう一方のボタン（次へ）が表示されます。現在の質問を表示するには

は、あなたが簡単なカウンタを使用します。あなたの「次へ」ボタンは、IDを「次へ」がある場合は

// JS 
var question = 1;

を、クリックイベントのイベントハンドラを追加します。

// JS 
var nextButton = document.getElementById('next'); 
nextButton.onClick = function() { 
    // Increment the current question 
    question++; 
    if (question > MAX_QUESTIONS) { 
    // Hide the button 
    nextButton.className += " hidden"; 
    } 
    // Hide the last question 
    document.getElementById('question' + (question - 1)).className += " hidden"; 
    // Show the current question 
    document.getElementById('question' + question).className = 
    document.getElementById('question' + question).className.replace("hidden", ""); 
}

など。私はあなた自身で残りの部分を把握すると思います。

これは純粋なJSです。また、初めにJSの学習をより簡単にするライブラリ（例：jQuery）を使用することもできます。

dom要素からクラスを追加したり削除したりするには、ここで説明する関数を実装することもできます。https://jaketrent.com/post/addremove-classes-raw-javascript/

出典

2017-04-25 05:02:20 Guybrush

クイックで一度に1つの要素を表示する方法

答えて

関連する問題