0

我有一个表格，但我无法生成我的链接。下一个按钮应该会亮起，然后是一些文本。

它应该如何工作：http: //jsfiddle.net/zMQcn/

一个不起作用的：http: //jsfiddle.net/Yq8Qf/

document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://yahoo.com/';\">other 8b white</input>";
        }
4

3 回答 3

1

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

将您的 HTML 更改为 use onchange，并提供<select>aname属性，而不是其选项。样式应该在标记之外进行。元素也应该有唯一的 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. 不过我已经清理了一点。

于 2013-10-18T03:44:25.177 回答
1

根据我上面的评论

<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>";
        }
    }
}

演示：小提琴

于 2013-10-18T03:59:13.893 回答
0

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>

Javascript

将窗格中的第二个下拉菜单从 更改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;
}
于 2013-10-18T04:37:23.703 回答