Develop Reference

Javascript: Change element class if button has a certain value [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
<div class="main-div main-div2"> <!-- IF up to date, main-div3 -->
<button id="update-btn" class="btn update-btn">
Up to date
</button>
</div>
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"
What kind of loop would be good for this Javascript function too if I want it to be
checking constantly?
Thank you.

there are many method to do it, here is the basic idea that you can get it done.
var btnText = document.getElementById("update-btn").innerText
var divClass = document.getElementById("outer-div")
if(btnText == "Up to date"){
divClass.classList.remove("main-div2");
divClass.classList.add("main-div3");
}else{
divClass.classList.remove("main-div3");
divClass.classList.add("main-div2");
}
.main-div2{
background-color:red;
}
.main-div3{
background-color:blue;
}
<div id="outer-div" class="main-div main-div2">
<button id="update-btn" class="btn update-btn">
Up to date
</button>
</div>
checkout the above snippet, its checking the text In if condition and sets up the class for parent div according to the text in the button, you can read more about adding and removing class from here

Click the button and it sends that info into another box on the page [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I want to be able to click on a button then that puts that information into another part on the page (in a box). However, I want the ability to remove this from that box too.
What is the best way to do this using html and javascript?
thanks

Using html, css and jQuery you can get your desired output.
Please check below code.
function getHtml() {
var test = $("#input").text();
$("#output").show();
$("#remove").show();
$("#output").text(test);
}
function remove() {
$("#output").hide();
$("#remove").hide();
}
#output {
display: none;
}
#remove {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input">
Input: welcome
</div>
<button onClick="getHtml()">Click</button>
<div id="output">
</div>
<button id="remove" onClick="remove()">Remove</button>

Picking a city and display content [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
am new to web development i have developed one website and now i want to place a text field on top corner and give options to pick a city and display content based on selected city. for example: in a web page i should have a text box, if i enter some city name it should display tat cities contents (use case: if i select Delhi it should display Delhi's content, if i select Mumbai it should display Mumbai's content how can i achieve this task ) any code, any references can be appreciated, Thanks in advance. (HTML, javascript, java anything is ok)

Here is something like what you want, you can make a popup instead of a dropdown if you want. Tell me if you need anymore help, or need to understand the code. This code is based of Dmitriy Lishtvan's answer for this question. I just made it relate to your question.
$(function(){
$('.selectOption').change(function(){
var selected = $(this).find(':selected').text();
//alert(selected);
$(".desc").hide();
$('#' + selected).show();
}).change()
});
.desc {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectOption">
<option>--Choose One---</option>
<option>Chennai</option>
<option>Washington</option>
<option>Hamburg</option>
</select>
<div id="changingArea">
<div id="Chennai" class="desc"><iframe height=900 width=900 src="https://en.wikipedia.org/wiki/Chennai"></iframe></div>
<div id="Washington" class="desc"><iframe height=900 width=900 src="https://www.washingtonpost.com"></iframe></div>
<div id="Hamburg" class="desc"><iframe height=900 width=900 src="https://www.tripadvisor.com/Tourism-g187331-Hamburg-Vacations.html"></iframe>
</div>
</div>

In Java you can use the TextField class to have the user input. Then you can use a JButton and then when the user clicks the button the corresponding content(Organize the content with an array).
Link to info about TextFields
https://docs.oracle.com/javase/tutorial/uiswing/components/textfield.html
Also JButton
https://docs.oracle.com/javase/tutorial/uiswing/components/button.html
Good Luck!

I think this is what you want
`http://jsfiddle.net/XCUDF/`

I need to populate the value of a text field [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
The value of universal_leadid is populated on every refresh and it come from a script related to a 3rd party Lead verification service (leadid.com). The objective for me is to post the other6 field value the same as the value assosiated with universal_leadid field.
HTML:
<input type="hidden" name="Other6" value="">
<input type="hidden" name="universal_leadid" value="KFLS00-D254-DD521-GF52-GHT554125" id="leadid_token">
Lead Id value is populated by lead id but I can't get value of the Other6 field.
This is what I have tried and the result is blank or nothing:
$( document ).ready(function() {
$('[name=Other6]').val($('[name=universal_leadid]').val());
//alert(universal_leadid);
//console.log($('[name=universal_leadid]'));
//console.log($('[name=universal_leadid]').val());
//console.log($('[name=Other6]').val());
$('#salutation').attr('checked',false);
//var myValue = $( "#leadid_token" ).val();
//document.getElementById('leadid_token');
//var x = document.getElementById("leadid_token").value;
//alert(x); // Showing Empty alert box
});
The result I want, is that every value populated on universal_leadid need to go to Other6 field

Your both the input fields are hidden
Please use
<input type="text" name="Other6" value="">
<input type="text" name="universal_leadid" value="KFLS00-D254-DD521-GF52-GHT554125" id="leadid_token">
Working Fiddle

Try this :
var token = $("#leadid_token").val();
$("input[name=Other6]").val(token);
console.log($("input[name=Other6]").val());
http://jsfiddle.net/8rw9cep6/

Error in JavaScript OR jQuery select element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
jQuery:
$("#div td").live("click", function(){
alert("Hellow");
});
JavaScript:
function alertH(){
alert("Hellow");
}
HTML jQuery:
<div>
<td>
<a>X</a>
<span> HI! </span>
</td>
</div>
Click on td and runs the jQuery function, but only if you click on td and not other tags inside, as in jQuery?
HTML JavaScript:
<div>
<td onClick="alertH()">
<span> Hummm </span>
<a> Delete </a>
</td>
</div>
How do in JavaScript, and it only runs if you click directly on td and not in other html tags inside
Performs this function only if you click the div function and not in other tags inside the div. How do the two methods above?

One way to do it is by adding the code on each element you dont want to call a function
onClick="event.cancelBubble = true;"
Another way is to check in the callback called to see the Target there.
<div onClick="test()" id="run">
Click Works<br>
<label>Not Work</label>
</div>
function test(){
if (event.target.id !== "run") return false;
alert(event.target);
}