HTML需要一個按鈕，將改變另一個按鈕的輸出

我正在做一個小的HTML項目，我有一個主要的CSS代碼，我卡住的HTML，我有（你會看到我的代碼）下拉按鈕，它提供了幾個選項，現在我想要的是當你點擊其中一個選項時 1.它在主下拉按鈕中顯示該選項（其中的文字[從$ 4到$ 30 Aud 「任何他們選擇））HTML需要一個按鈕，將改變另一個按鈕的輸出

我想以某種方式爲」添加到購物車「按鈕更改爲代碼，將重定向到上面選擇的內容（選項提及以上）

反正感謝您的幫助

CSS：

.button { 
background-color: #ffffff; 
border: none; 
color: black; 
padding: 15px 32px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
font-size: 16px; 
margin: 1px 2px; 
cursor: pointer; 
} 
ul {display: inline; 
    list-style-type:none; 
     text-decoration: none;} 
.button:hover{ 
background-color: #595959; 
} 
    .header { 
     text-align: center; 
     background-color: #2ac9b7; 
     color: black; 
     position: fixed; 
     width: 100%; 
     padding: 20px; 
    } 


html, body{ 
width:100%; 
height:100%; background-color: #62666d; margin: 0px; 
} 


    h1 { 
     font-weight:bold; 
     color: #000000; 
     font-size:42px; 
    } 


    .main { 
     font-family: arial; 
     margin: 0px; 
    } 

    .Content { 
     top:0; 
     bottom:0 
     left:0; 
     right:0; 
     margin-top: 160px 
    } 
.dropbtn { 
background-color: #4CAF50; 
color: white; 
padding: 16px; 
font-size: 16px; 
border: none; 
cursor: pointer; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
position: relative; 
display: inline-block; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
z-index: 1; 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
display: block; 
} 

/* Change the background color of the dropdown button when the dropdown    content is shown */ 
.dropdown:hover .dropbtn { 
background-color: #3e8e41; 
} 
img 
{ 
display: block; 
margin: 0 auto; 
}

HTML

<html> 

<head> 
<link rel="stylesheet" href="Masters_baby.css"> 
<div class="Main"> 
<div class="header"> 
    <div class="links"> 

     <ul><a href="index.html"><button class="button">Home</button></a> </ul> 
     <ul><a href="Shop.html"><button class="button">Shop</button></a></ul> 
     <ul><a href="Art.html"><button class="button">Art</button></a></ul> 
     <ul><a href="AboutMe.html"><button class="button">About Me</button></a></ul> 
     <ul><a href="Support.html"><button class="button">Support</button> </a></ul> 
     <ul><a href="Production.html"><button class="button">Production</button></a></ul> 
    </div> 
</div> 
</div> 
</div> 
<IMG STYLE="position:absolute; TOP:23px; LEFT:20px; WIDTH:130px; HEIGHT:50px" SRC="Logo.png"> 
</head> 

<body> 
<IMG STYLE="TOP:180px; LEFT:30px; WIDTH:50px; HEIGHT:50px" SRC="Flame.png"> 
</body> 
</div> 
</div> 
<div class="parallax"></div> 
<div style="height:4950px; width:80%; margin:0 auto; background-color:#98eacc; margin-top: 44px"> 



    <div class="Products" style="padding-top: 50px;"> 

    <div class="∞ Frosted Kumquat" style= "width: 100%; height:9.1%;  width:80%; margin:0 auto; background-color:#fff; "> 
    <p style="font-size: 25px">∞ Frosted Kumquat</p> 
    <IMG STYLE="WIDTH:35%; HEIGHT:63%" SRC="candle.jpg"  > 
    <table style="width: 100%;"> 
    <tbody> 
    <tr> 
    <td style="width: 80%;">A fresh citrusy smell that fills the room, Its is fairly stong washing out any unwanted smells or just lifting the room. Best for someone who doesnt like the smell of overly sweet but likes the fresh smell of fruit.</td> 
    <td> 
    <div class="dropdown"><button class="dropbtn">$4-$30 AUD</button> 
    <div class="dropdown-content"><a href="#">Melts $4.00</a> <a href="#">Tea light(6) $5.00</a> <a href="#">Candle in a Tin $14.00</a> <a  href="#">Specitally Candles $15.00-$30.00</a> <a href="#">Boxed candle $22.00</a> <a href="#">Triplet pack of candles $28.00</a></div> 
    </div> 
    </td> 
    </tr> 
    <tr> 
    <td></td> 
    <td> 
    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 

<!-- Identify your business so that you can collect the payments. --> 
<input type="hidden" name="business" value="[email protected]"> 

<!-- Specify a PayPal Shopping Cart Add to Cart button. --> 
<input type="hidden" name="cmd" value="_cart"> 
<input type="hidden" name="add" value="1"> 

<!-- Specify details about the item that buyers will purchase. --> 
<input type="hidden" name="item_name" value="Birthday - Cake and Candle"> 
<input type="hidden" name="amount" value="3.95"> 
<input type="hidden" name="currency_code" value="USD"> 

<!-- Display the payment button. --> 
<input type="image" name="submit" 
src="Add2Cart.png" 
alt="Add to Cart" STYLE="WIDTH:70%; HEIGHT:20%"> 
<img alt="" width="1" height="1" 
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif"> 
    </td> 
    </tr> 
    </tbody> 
    </table>  
    </div> 
</div> 
</div> 
</div> 
</html>

再次感謝所有幫助:)

來源

2017-02-17 RedstoneMaina

要使用此功能，您需要使用JavaScript。從這個主題的一些教程開始。你基本上想要做的是響應一個元素的「變化」事件，從該元素獲取值，並設置值/屬性/文本等。的另一個元素。 – David

[文檔]（https://www.w3schools.com/jsref/event_onchange.asp）。據我所知，你不能要求你不知道的事情。我建議你選擇一個Html/css/js的教程。並從中學習基礎知識。 –

首先，將所有的您的內容在<body>。你的腦袋就是你鏈接到樣式表，加載腳本和設置元數據等的地方，你不想在頭部有任何內容，比如頭部。

你可以用JavaScript來實現這樣的事情。讓我舉一個例子。

假設我們有如下HTML：

<select class="selector"> 
    <option value="10">10$</option> 
    <option value="20" selected>20$</option> 
    <option value="30">30$</option> 
</select> 

Selected plan: <span class="selected_plan">20$</span>

我們想改變span的帶班selected_plan內容在我們select元素選擇的值。

首先，我們需要創建一個新腳本（將腳本加載到您的body的底部）。

<script> // place your script here </script>

或

<script src="link_to_your_js_file.js"></script>

接下來，我們需要選擇像這樣我們的元素：

let selector = document.querySelector('.selector'); 
let selectedPlan = document.querySelector('.selected_plan');

然後我們監聽select更改時：

selector.addEventListener('change', function() { 
    selectedPlan.innerHTML = selector.value + '$'; 
});

我創造了這個的jsfiddle給你，讓你可以用這個特殊的例子實驗：https://jsfiddle.net/dgyyyoh8/1/

編輯：

如果我是正確的，你想改變屬性爲好。您可以使用setAttribute方法。

let link = document.querySelector('.element'); 
link.setAttribute('href', selected.value);

在此的jsfiddle看看：https://jsfiddle.net/dgyyyoh8/2/

選擇我們的元素
創建時選擇改變
設置鏈接的innerHTML等於「去到一個事件（選項的文本）'
將href屬性設置爲等於所選選項的值。

編輯：

有辦法改變select元素的外觀。

例如：https://codepen.io/ericrasch/pen/zjDBx

我建議你也看看的CSS框架Bootstrap。這個框架包含很多你可以使用的類來真正把你的樣式帶到下一個級別。

來源

2017-02-17 12:44:11

這看起來和我目前爲止所見到的一樣接近，但是我該如何改變它，以便輸出是Href改變的按鈕或其他東西 – RedstoneMaina

另外，我想知道它是否可以是其他任何東西因爲從我的研究中我相信你不能改變它的外觀。 – RedstoneMaina

@RedstoneMaina看看我的編輯。我想我回答了你的兩個問題。 –

HTML需要一個按鈕，將改變另一個按鈕的輸出

回答

相關問題