我有一個表單，我無法讓我的鏈接生成。下一個按鈕應該點亮，然後是一些文本。鏈接不生成
如何它應該工作：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>";
}
基於以上
<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
當從<select>獲取值，你必須做一些不同的事情。
更改您的HTML以使用onchange，並給屬性，而不是其選項。樣式應該在標記之外進行。元素也應該具有唯一的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，因爲人們會期望鏈接更改瀏覽器。如果他們點擊一個按鈕並轉到一個新頁面，那就不那麼直觀了。
UPDATE
這裏有一個fiddle與您的代碼爲ATT 8GB black工作。儘管我已經清理了一下。
我已經更新了一切就像你說的，它仍然無法正常工作http ：//jsfiddle.net/Yq8Qf/3/ – user2680614
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&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對象中，因此您可以更輕鬆地進行編輯。現在它只是提醒您選擇的網址。
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;
}
在我看來，他們都沒有工作？ – tomca32
''onClick'在選項中贏得''而不是'onChange'中的'onChange'在'
有很多問題.... 1）'tryToMakeLink'是負載回調中的私有方法，所以它在全局中不可用上下文。 2）'選項'元素onclick不被廣泛支持使用'select's'onchange'來代替'3）'：selected'不是一個有效的CSS選擇器......看起來你試圖將jQuery選擇器與本地javascript混合使用 –