链接未生成

根据我上面的评论

<form name="quiz" id='quiz'>
     <h4>What carrier do you have?</h4>
    <select style="margin-top: 1pt" onchange="tryToMakeLink()" name="q1">
        <option disabled="disabled" selected>Choose your model</option>
        <option value="AT&T">AT&T</option>
        <option value="Other">Other</option>
        <option value="Unlocked">Unlocked</option>
    </select>
     <h4>What is your phones capicity?</h4>
    <select style="margin-top: 1pt" onchange="tryToMakeLink()" name="q2">
        <option disabled="disabled" selected>Choose your model</option>
        <option value="8GB">8GB</option>
        <option value="16GB">16GB</option>
    </select>
     <h4>What color is your phone?</h4>
    <select style="margin-top: 1pt" onchange="tryToMakeLink()" name="q3">
        <option disabled="disabled" selected>Choose your model</option>
        <option value="Black">Black</option>
        <option value="White">White</option>
    </select>
    <br />
    <div id=linkDiv>
        <input type=button disabled=disabled value=Next />
    </div>
</form>

和

function tryToMakeLink() {
    //get all selected radios
    var q1 = document.querySelector('select[name="q1"]');
    var q2 = document.querySelector('select[name="q2"]');
    var q3 = document.querySelector('select[name="q3"]');
    //make sure the user has selected all 3
    if (q1 == null || q2 == null || q3 == null) {
        document.getElementById("linkDiv").innerHTML = "<input type=button disabled=disabled value=Next>";
    } else {
        console.log(q1, q1.selectedIndex)
        //now we know we have 3 radios, so get their values
        q1 = q1.selectedIndex > 0 ? q1.options[q1.selectedIndex].value : '';
        q2 = q2.selectedIndex > 0 ? q2.options[q2.selectedIndex].value : '';
        q3 = q3.selectedIndex > 0 ? q3.options[q3.selectedIndex].value : '';
        //now check the values to display a different link for the desired configuration
        if (q1 == "AT&T" && q2 == "8GB" && q3 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://google.com/';'">att 8gb black</input>";
        } else if (q1 == "Other" && q2 == "8GB" && q3 == "White") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://yahoo.com/';'">other 8b white</input>";
        } else if (q1 == "AT&T" && q2 == "16GB" && q3 == "White") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://bing.com/';'">another option</input>";
        } else if (q1 == "AT&T" && q2 == "16GB" && q3 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://gmail.com/';'">oops</input>";
        } else if (q1 == "AT&T" && q2 == "8GB" && q3 == "White") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://hotmail.com/';'">can't</input>";
        } else if (q1 == "Other" && q2 == "8GB" && q3 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://images.google.com/';'">yours</input>";
        } else if (q1 == "Other" && q2 == "16GB" && q3 == "White") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://youtube.com/';'">mines</input>";
        } else if (q1 == "Other" && q2 == "16GB" && q3 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://docs.google.com/';'">what</input>";
        } else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "White") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://wepriceit.webs.com/';'">red</input>";
        } else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://webs.com/';'">orange</input>";
        } else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "White") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://gazelle.com/';'">green</input>";
        } else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next onclick='"window.location.href='http://glyde.com/';'">blue</input>";
        }
    }
}

演示：小提琴

从<select>获取值时，您必须做一些不同的事情。

将 HTML 更改为使用 onchange ，并为<select>提供name属性，而不是其选项。 样式设置应在标记之外进行。 元素还应具有唯一的 ID，或者在本例中没有 ID。

<select onchange="tryToMakeLink()" name='q1'>
    <option disabled="disabled" selected>Choose your model</option>
    <option value="AT&T">AT&T</option>
    <option value="Other">Other</option>
    <option value="Unlocked">Unlocked</option>
</select>

然后，使用查询选择器获取<select>：

var q1 = document.querySelector('select[name="q1"]');

不是检查null，而是检查selectedIndex：

if (q1.selectedIndex && q2.selectedIndex && q3.selectedIndex) {
     ...enable button and proceed...

然后，在准备就绪时，使用 selectedIndex 获取选项的值。

q1 = q1.options[q1.selectedIndex];

然后像往常一样继续。

此外，如果您要将用户发送到新页面，良好的 UX（用户体验）实践决定了您应该使用 LINK，因为人们会期望一个链接来更改他们的浏览器。 如果他们点击一个按钮并转到一个新页面，那就不那么直观了。

更新

这是您的代码为ATT 8GB black工作的小提琴。 不过我已经清理了一下。

HTML

<h4>What carrier do you have?</h4>
<select style="margin-top: 1pt" id="carrier">
    <option value="">Choose your carrier...</option>
    <option value="ATT">AT&#38;T</option>
    <option value="Other">Other</option>
    <option value="Unlocked">Unlocked</option>
</select>
<h4>What is your phones capicity?</h4>
<select style="margin-top: 1pt" id="capacity">
    <option value="">Choose your capacity...</option>
    <option value="8">8GB</option>
    <option value="16">16GB</option>
</select>
<h4>What color is your phone?</h4>
<select style="margin-top: 1pt" id="color">
    <option value="">Choose your color...</option>
    <option value="black">Black</option>
    <option value="white">White</option>
</select>
<p>
    <input disabled id="mybutton" type="button" value="Next"/>
</p>

爪哇语

窗格中的第二个下拉列表从"onLoad"更改为"No wrap - in <head>"。我知道我没有使用完美的加载事件，但现在这有效。:p 所有 URL 都存储在 JSON 对象中，因此您可以更轻松地对其进行编辑。现在它只是在选择URL的情况下发出警报。

var URLs = {
    'ATT': {
        '8': {
            'black': 'http://www.google.com/',
            'white': 'http://www.yahoo.com/'
        },
        '16': {
            'black': 'http://www.dogpile.com/',
            'white': 'http://www.bing.com/'
        }
    },
    'Other': {
        '8': {
            'black': 'http://www.google.com',
            'white': 'http://www.yahoo.com'
        },
        '16': {
            'black': 'http://www.dogpile.com/',
            'white': 'http://www.bing.com/'
        }
    },
    'Unlocked': {
        '8': {
            'black': 'http://www.google.com',
            'white': 'http://www.yahoo.com'
        },
        '16': {
            'black': 'http://www.dogpile.com/',
            'white': 'http://www.bing.com/'
        }
    }
};
// check to see if all selects have a value that isn't the first one
function checkInput() {
    var disable = false;
    var select = document.getElementsByTagName('select');
    for(var i=0,l=select.length;i<l;i++) {
        if(select[i].selectedIndex==0)
            { disable = true; }
    }
    document.getElementById('mybutton').disabled = disable;
}
function go() {
    var carrierE = document.getElementById('carrier');
    var carrier = carrierE.getElementsByTagName('option')[carrierE.selectedIndex].value;
    var capacityE = document.getElementById('capacity');
    var capacity = capacityE.getElementsByTagName('option')[capacityE.selectedIndex].value;
    var colorE = document.getElementById('color');
    var color = colorE.getElementsByTagName('option')[colorE.selectedIndex].value;
    window.alert(URLs[carrier][capacity][color]);
}
function init() {
    var select = document.getElementsByTagName('select');
//  attach checkInput to all select elements
    for(var i=0,l=select.length;i<l;i++) {
        if(select[i].addEventListener)
            { select[i].addEventListener('change',checkInput,false); }
        else if(select[i].attachEvent)
            { select[i].attachEvent('onchange',checkInput); }
        else
            { select[i].onchange = checkInput; }
    }
    var button = document.getElementById('mybutton');
    if(button.addEventListener)
        { button.addEventListener('click',go,false); }
    else if(button.attachEvent)
        { button.attachEvent('onclick',go); }
    else
        { button.onclick = go; }
}
if(document.addEventListener) {
    document.addEventListener('DOMContentLoaded',init,false);
}
else {
//  I can do better but it's not important here
    window.onload = init;
}