Question

我有一个表单，我无法获取生成的链接。下一个按钮应该点亮，然后是一些文字。

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

Answer 1

从<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];

然后照常进行。

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

<强>更新

这是fiddle，其代码适用于ATT 8GB black。我已经把它清理了一下。

Answer 2

根据我上面的评论

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

演示：Fiddle

Answer 3

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

链接没有产生

3 个答案: