Changing the Text on a Label

Changing the text on a label

self.labelText = 'change the value'

The above sentence makes labelText change the value, but not change depositLabel's text.

To change depositLabel's text, use one of following setences:

self.depositLabel['text'] = 'change the value'

OR

self.depositLabel.config(text='change the value')

Change label text using JavaScript

Because your script runs BEFORE the label exists on the page (in the DOM). Either put the script after the label, or wait until the document has fully loaded (use an OnLoad function, such as the jQuery ready() or http://www.webreference.com/programming/javascript/onloads/)

This won't work:

<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
<label id="lbltipAddedComment">test</label>

This will work:

<label id="lbltipAddedComment">test</label>
<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>

This example (jsfiddle link) maintains the order (script first, then label) and uses an onLoad:

<label id="lbltipAddedComment">test</label>
<script>
function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';

    });  
</script>

How to change the text of a label?

ASP.Net automatically generates unique client IDs for server-side controls.

Change it to

 $('#<%= lblVessel.ClientID %>')

In ASP.Net 4.0, you could also set the ClientIDMode property to Static instead.

How to make the text of a Label change automatically?

You need to create variables to reference your labels by. Also, you need to update them when the PH is changed. Here is what the code should look like, with changes marked with ### EDITED LINE and ### ADDED LINE:

import tkinter as tk
from tkinter import ttk
from tkinter.constants import *

vegetable_needs = {
    'Tomato': {'ph': '6', 'moisture': '60', 'humidity': '70'},
    'Bell pepper': {'ph': '9', 'moisture': '61', 'humidity': '71'},
    'Cucumber': {'ph': '2', 'moisture': '62', 'humidity': '72'},
    'Broccoli': {'ph': '4', 'moisture': '63', 'humidity': '73'},
    'Green Bean': {'ph': '1', 'moisture': '64', 'humidity': '74'},
    'Zucchini': {'ph': '5', 'moisture': '65', 'humidity': '75'},
    'Sweet potatoe': {'ph': '0', 'moisture': '66', 'humidity': '76'}
}

#Create Frame
def create_input_frame(container):
    #declare string variables
    vegetable = tk.StringVar()

    frame = tk.Frame(container, borderwidth=1, relief=RIDGE, padx=15, pady=10)
    
    options = ttk.Combobox(frame, width = 20, textvariable = vegetable)
    #list of veggies
    options['values'] = (
    "Tomato",
    "Bell pepper",
    "Cucumber",
    "Broccoli",
    "Green Bean",
    "Zucchini",
    "Sweet potatoe"
    )
    options['state'] = 'readonly'

    veggie_label = ttk.Label(frame, text = "Select a veggie: ", font = ("Times New Roman", 10)) ### EDITED LINE
    veggie_label.grid(column=0, row=0, padx=5, pady=0) ### ADDED LINE
    options.grid(column = 1, row = 0)
    options.current()
    

    def handler(event):
        current = options.current()
        if current != -1:
            ph_level = vegetable_needs[vegetable.get()]['ph']
            value = ph_level
            value_label.config(text=value) ### ADDED LINE
            print(value)
    
    
    options.bind('<<ComboboxSelected>>', handler)
    
    value_label = ttk.Label(frame, text=value) ### EDITED LINE
    value_label.grid(column=1, row=2) ### ADDED LINE
    ph_label = ttk.Label(frame, text='PH Level') ### EDITED LINE
    ph_label.grid(column=0, row=2) ### ADDED LINE
    
    return frame

#Create the main window
def create_main_window():
    root = tk.Tk()
    root.title('Growing Veggies')
    # root.attributes('-toolwindow', False)
    r1=0
    r2=0
    r3=0
    
    #Create zones 1-5 row 0
    if number_of_zones >= 1 and number_of_zones <= 5:
        for r1 in range(number_of_zones):
            input_frame = create_input_frame(root)
            input_frame.grid(column=r1, row=0)
            r1+=1
    #Create zones 6-10 rows 0-1
    elif number_of_zones > 5 and number_of_zones <=10:
        for r1 in range(5):
            input_frame = create_input_frame(root)
            input_frame.grid(column=r1, row=0)
            r1+=1
        for r2 in range(number_of_zones - 5):
            input_frame = create_input_frame(root)
            input_frame.grid(column=r2, row=1)
            r2+=1
    #Create zones 11-15 rows 0-2
    elif number_of_zones > 10 and number_of_zones <=15:
        for r1 in range(5):
            input_frame = create_input_frame(root)
            input_frame.grid(column=r1, row=0)
            r1+=1
        for r2 in range(5):
            input_frame = create_input_frame(root)
            input_frame.grid(column=r2, row=1)
            r2+=1
        for r2 in range(number_of_zones - 10):
            input_frame = create_input_frame(root)
            input_frame.grid(column=r2, row=2)
            r3+=1

    #Output an error
    else:
        root.title('ERROR')
        error_label = ttk.Label(root, text = "Please enter a valid number between 1 and 15")
        error_label.grid(column=1, row=1, padx=15, pady=5)
        ttk.Button(root, text = "Acknowledge", command=quit).grid(column=1, row=2, padx=5, pady=5)
    
    root.mainloop()

if __name__ == "__main__":

    value = "?"
    number_of_zones = int(input("How many zones should be made? "))
    create_main_window()

Notice I define the labels as variables: value_label, ph_label, and error_label. This enables the labels to be referenced throughout the program. Also notice how in the handler function, I call value_label.config(text=value). This sets the value_label's text to the PH level.

Change text of label on changing of select box option using jquery?

You need to define the || in the elseif like this => $(this).val() == 'Electronics' for the last else to trigger so that the label is change to NO. OF SHIPMENT if no condition matches.

Also, instead of using #commoditySelect again and again you can simply use $(this)

$(this) refers to the element where the change event is occurring

Live Working Demo:

$(function() {
  $('#commoditySelect').change(function() {
    if ($(this).val() == 'Ecommerce') {
      $('#commodityLabel').text('WEIGHT (KG)');
    } else if ($(this).val() == 'Machinery' || $(this).val() == 'Electronics') {
      $('#commodityLabel').text('CARGO VALUE');
    } else {
      $('#commodityLabel').text('NO. OF SHIPMENT');
    }
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <div class="col-6">
      <label>COMMODITY</label>
      <select class="form-control" id="commoditySelect">
        <option value="Ecommerce">E-Commerce</option>
        <option value="Machinery">Machinery</option>
        <option value="Plastics">Plastics</option>
        <option value="Clothing & Textile">Clothing & Textile</option>
        <option value="Eyewear">Eyewear</option>
        <option value="Electronics">Electronics</option>
        <option value="Personal Effects">Personal Effects</option>
        <option value="Automobile Spares">Automobile Spares</option>
        <option value="Food Products">Food Products</option>
        <option value="Livestock Feed">Livestock Feed</option>
        <option value="Cosmetics">Cosmetics</option>
        <option value="Chemicals">Chemicals</option>
        <option value="Pharmaceutical Products">Pharmaceutical Products</option>
        <option value="Fertilizer">Fertilizer</option>
        <option value="Rubber">Rubber</option>
        <option value="Wood">Wood</option>
        <option value="Paper">Paper</option>
        <option value="Printed Material">Printed Material</option>
        <option value="Scrap">Scrap</option>
        <option value="Footwear">Footwear</option>
        <option value="Cement">Cement</option>
        <option value="Ceramic">Ceramic</option>
        <option value="Glass">Glass</option>
        <option value="Metals">Metals</option>
        <option value="General Cargo">General Cargo</option>
      </select>
    </div>
    <div class="col-6">
      <label id="commodityLabel">WEIGHT (KG)</label>
      <input type="text" class="form-control" placeholder="Default Input" />
    </div>
  </div>
</div>

How to change text inside a label tag using jquery

If you can change your HTML then simply wrap the text you want to change in a span to make it easier to select:

<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;">
    <span>Add Your Image</span>
    <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;">  
</label>

$('.feedbackImg span').text('Change Your Image');

If you can't change the HTML, then you would need to amend your JS code to retreive and amend the textNode itself:

$('.feedbackImg').contents().first()[0].textContent = 'Change Your Image';

How to change the text of a label when clicked without using buttons?

You can put the "(Click to expand...)" inside of a <span> as well as adding "<i class="fa fa-minus-circle"></i>" and hiding it with js. Then just toggle everything along with "<i class="fa fa-plus-circle"></i>"

The finished code:

$(document).ready(function() {
  $('.hide').hide();
  $('.fa-minus-circle').hide(); //This hides the minus button
  $('[data-toggle="toggle"]').change(function() {
  
    //This takes the label of the same id as the input, so we can get their children. Afterwards we toggle everything.
    $("label[for='"+this.id+"'] i.fa-plus-circle").toggle()
    $("label[for='"+this.id+"'] i.fa-minus-circle").toggle()
    $("label[for='"+this.id+"'] span").toggle()

    $(this).parents().next('.hide').toggle();    
    
  });
});

[data-toggle="toggle"]{
  display: none;
}

.label {
  display: block;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
  width: 100%;
}

<table>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="person">
                <i class="fa fa-plus-circle"></i>
                
                <!-- New minus <i> -->
                <i class="fa fa-minus-circle"></i>
                
                <!-- Click to expand inside span <i> -->
                <b>Person</b> <span>(Click to expand...)</span>
              </label>
        <input type="checkbox" id="person" data-toggle="toggle">
      </td>
    </tr>
  </tbody>

  <tbody class="hide">
    <tr>
      <td class="people">Jack</td>
      <td class="right cell" id="jack">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="people">Jill</td>
      <td class="right cell" id="jill">
        <span>0</span>
      </td>
    </tr>
  </tbody>
  <tbody class="section">
    <tr>
      <td colspan="2">
        <label class="label" for="place">
                <i class="fa fa-plus-circle"></i>
                
                <!-- New minus <i> -->
                <i class="fa fa-minus-circle"></i>
                
                <!-- Click to expand inside span <i> -->
                <b>Place</b> <span>(Click to expand...)</span>
              </label>
        <input type="checkbox" id="place" data-toggle="toggle">
      </td>
    </tr>
  </tbody>
  <tbody class="hide">
    <tr>
      <td class="city">LA</td>
      <td class="right cell" id="la">
        <span>0</span>
      </td>
    </tr>

    <tr>
      <td class="city">NYC</td>
      <td class="right cell" id="nyc">
        <span>0</span>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

---

Related Topics