堆棧內存溢出
  簡體   English   中英

Javascript如何單擊每個按鈕后更改paragrap中的文本

[英]Javascript how change text in paragrap after click each button

 原文  2015-07-16 09:48:14  5   4    javascript/ html

問題描述

我試圖在單擊按鈕后更改跨度中的文本。 我有四個按鈕，單擊每個按鈕后，我想更改文本。

任何幫助，將不勝感激！

這是我的代碼： 

<html>
<body>
<button id="product" value="2" onclick="setTime(product[this].time)">first button</button>
<button id="product" value="3" onclick="setTime(product[this].time)">second button</button>

            <span id="time">16-20 min</span>
            <span id="water">750 ml</span>
            <span id="salt">10,5g</span>
            <span id="comments">ajsdhaskj</div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vegetables.js"></script>

<script type="text/javascript">

        setTime(product[0].time);
        setWater(product[0].water);
        setSalt(produkt[0].salt);
        setComment(produkt[0].comment);     



    $('#product').onclick('change', function() {
        var numb = $(this).value();

        setTime(product[numb].time);
        setWater(product[numb].woda);
        setSalt(product[numb].salt);
        setComment(product[numb].comment);

    });

    function setTime(time) {
        $('#time').html(time);
    }

    function setWater(water) {
        $('#water').html(water);
    }

    function setSalt(salt) {
        $('#salt').html(salt);
    }

    function setComment(comment) {
        $('#comment').html(comment);
    }
</script>

還有我的vegeatbles.js 

var product = [
{name: 'Carrot',time: '12 min',water: '12 min',salt: '12 min',comment: 'Carrot comment'},
{name: 'Potato', time: '123 min', water: '1 ml', salt: '10.5g',comment: 'potato comment'
}]

4 個解決方案

解決方案1
 1  2015-07-16 10:11:46

有很多關於您的代碼有什么問題的清單。 我可能錯過了一些東西：

  • 您不能有多個具有相同ID的元素。 使用class代替。
  • 您的按鈕具有值2和3，然后嘗試引用數據元素，但是只有兩個元素，因此其中沒有2或3。
  • 您可以使用“ #comment”選擇器設置注釋，但元素的實際ID為“ #comments”。
  • 您的數據在product變量中，但有時您會通過produkt引用它。
  • 按鈕上的onclick事件似乎是多余的，因為您已經通過jQuery附加了setTime事件。
  • 加載頁面時，您需要在元素上附加事件。

這是您的代碼的有效重制： 

 var product = [ {name: 'Carrot',time: '12 min',water: '12 min',salt: '12 min',comment: 'Carrot comment'}, {name: 'Potato', time: '123 min', water: '1 ml', salt: '10.5g',comment: 'potato comment' }]; jQuery( function( $ ) { setTime( product[ 0 ].time ); setWater( product[ 0 ].water ); setSalt( product[ 0 ].salt ); setComment( product[ 0 ].comment ); $( '.product' ).click( 'change', function() { var numb = Number( $( this ).val() ); setTime( product[ numb ].time ); setWater( product[ numb ].woda ); setSalt( product[ numb ].salt ); setComment( product[ numb ].comment ); } ); } ); function setTime( time ) { $( '#time' ).html( time ); } function setWater( water ) { $( '#water' ).html( water ); } function setSalt( salt ) { $( '#salt' ).html( salt ); } function setComment( comment ) { $( '#comments' ).html( comment ); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="product" value="0">first button</button> <button class="product" value="1">second button</button> <span id="time">16-20 min</span> <span id="water">750 ml</span> <span id="salt">10,5g</span> <span id="comments">ajsdhaskj</div>

解決方案2
 1  2015-07-16 10:14:19

這對我有用。 看我的例子 

    <body>
<button id="product" value="0" onclick="loadContent(this.value)">first button</button>
<button id="product" value="1" onclick="loadContent(this.value)">second button</button>

            <span id="time">16-20 min</span>
            <span id="water">750 ml</span>
            <span id="salt">10,5g</span>
            <span id="comments">ajsdhaskj</span>
<script type="text/javascript">




var product = [
    {name: 'Carrot',time: '12 min',water: '12 min',salt: '12 min',comment: 'Carrot comment'},
    {name: 'Potato', time: '123 min', water: '1 ml', salt: '10.5g',comment: 'potato comment'
    }]


    function setTime(time) {
        $('#time').html(time);
    }

    function setWater(water) {
        $('#water').html(water);
    }

    function setSalt(salt) {
        $('#salt').html(salt);
    }

    function setComment(comment) {
        $('#comments').html(comment);
    }

    function loadContent(buton){
        setTime(product[buton].time);
        setWater(product[buton].water);
        setSalt(product[buton].salt);
        setComment(product[buton].comment); 
    }

   loadContent(0);

</script>

解決方案3
 0  2015-07-16 10:21:34

使用此代碼。 這是這個的jsfiddle 。

注意：我也更改了一些變量。 

  var product = [{name: 'Carrot',time: '12 min',water: '12 min',salt: '12 min',comment: 'Carrot comment'},{name: 'Potato', time: '123 min', water: '1 ml', salt: '10.5g',comment: 'potato comment'}]; $('button').click(function() { var num = $(this).val(); document.querySelector('#time').innerHTML = num; setTime(product[num].time); setWater(product[num].water); setSalt(product[num].salt); setComment(product[num].comment); }); function setTime(time) { $('#time').html(time); } function setWater(water) { $('#water').html(water); } function setSalt(salt) { $('#salt').html(salt); } function setComment(comment) { $('#comment').html(comment); } 
 <button id="product0" value="0"> first button </button> <button id="product1" value="1"> second button </button> <span id="time">16-20 min</span> <span id="water">750 ml</span> <span id="salt">10,5g</span> <span id="comments">ajsdhaskj</span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

解決方案4
 0  2015-07-16 10:26:17

是的，我的意思是在每個地方都是“產品”。 我正在嘗試為不同的產品顯示不同的烹飪時間，水等。 我是否可以通過一個函數來完成此任務，該函數檢查單擊了哪個按鈕，然后從我的Vegetables.js中讀取了適當的值？

實際上，單擊按鈕后代碼無效。 在此之前，我嘗試了select元素，但似乎工作正常。 我需要更改選擇和使用許多按鈕的動作。 

<html>
<body>
<select id="product">
    <option value="0">Carrot</option>
    <option value="1">Potato</option>
    <option value="2">Corn</option>
</select>

<span id="time">16-20 min</span>
<span id="water">750 ml</span>
<span id="salt">10,5g</span>
<span id="comments">comment</span>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vegetables.js"></script>

<script type="text/javascript">

    setTime(product[0].time);
    setWater(product[0].water);
    setSalt(product[0].salt);
    setComment(produkt[0].comment);     

 $('#product').onchange('change', function() {
    var numb = $(this).value();

    setTime(product[numb].time);
    setWater(product[numb].woda);
    setSalt(product[numb].salt);
    setComment(product[numb].comment);

});

function setTime(time) {
    $('#time').html(time);
}

function setWater(water) {
    $('#water').html(water);
}

function setSalt(salt) {
    $('#salt').html(salt);
}

function setComment(comment) {
    $('#comment').html(comment);
}
 </script>
 </body>
 </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript - 在每個按鈕單擊時更改段落文本 Javascript：單擊后更改按鈕文本更改 如何使用JavaScript更改點擊時的按鈕文字？ 使用 javascript 在每次單擊時更改按鈕內的文本？ 單擊按鈕更改文本，JavaScript 單擊后更改按鈕文本 如何通過點擊javascript中的按鈕更改背景顏色和文本顏色？ Javascript：點擊更改按鈕文字顏色 使用javascript更改按鈕文字/值 如何使用 JavaScript 將文本內容（單擊按鈕后）添加到網頁？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM