Error in JavaScript OR jQuery select element [closed] - javascript

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);
}

Related

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>

Getting text input in html and transferring to javascript [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 6 years ago.
Improve this question
I understand how to use input into html to call javascript defined in the same directory as the html ex:
<input type="button" value="Submit" onclick="someFunc(500)" >
so if the button is clicked the java script will run someFunc(500), is there a way to take text input, and when a button is pressed use this input as a parameter value for the java script? I know this won't work and I'm not even defining a button, but something like
<input type="text" id= "example" onclick="someFunc(this.value)">
where example is the data that was put into the input text field?
What about using a listener?
var example = document.getElementById("example");
example.onclick = function(){
someFunc(example.value);
}
You can do this with jQuery: See this jsfiddle
HTML:
<input type="text" id="example" value="12345">
JavaScript:
$('#example').on('click',function() {
console.log($(this).val()); // 12345
});
The HTML 5 Recommended way, is to use data-* attributes. Like this:
HTML:
<div id="example2" data-product-id="my-product-1"></div>
<button id="getProductId">Get Product Id</button>
JavaScript:
$('#getProductId').on('click',function() {
console.log($('#example2').attr('data-product-id')); // my-product-1
});
<script type="application/javascript">
function someFunc() {
var value = document.getElementById('example').value;
// do something with value here
return false;
}
</script>
<input type="text" id="example">
<input type="button" value="Submit" onclick="someFunc()" >

Select multiple values then proceed [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
i have two div's and i want to select first upper div value then lower div value. and pass both the values to next page.
here's my code:
<div id="upper">
Link
</div>
<div id="lower">
Link 1
</div>
if upper value is not selected then it should not go to the next page and when both values are selected then it should go on to next page.
what are the possible solutions.
Any help would be appreciated.
html
<span class="span_to_remember" data-my-data="myData1">
data1
</span>
<span class="span_to_remember" data-my-data="myData2">
data2
</span>
<span class="span_to_remember" data-my-data="myData3">
data3
</span>
<span class="span_to_remember" data-my-data="myData4">
data4
</span>
js(jquery)
$(document).ready(function(){
$(".span_to_remember").click(function() {
var spanData = $(this).data("my-data");
// also you can grab html with
// var spanData = $(this).html();
localStorage.setItem('param1', spanData);
});
});
after you write something on first page, you can read it on other page with
localStorage.getItem('param1');
info will be available for user on every page, even if he close browser, and return to website later

Get full html (including textarea content) from div [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 9 years ago.
Improve this question
I have a div 'someDiv'. In that div I have a table, and in the table's cells, I have textareas.
I want that when a certain button is clicked 'mybutton', the full html (it might has changed because the user put some data in the cells), will be put inside a hidden field.
All of that - using Jquery.
Of course, I tried $('#someDiv').html() but it gives me the original html and not what the user put.
EDIT: here is the code:
http://jsfiddle.net/RCQmj/
<div id="interviewSummarySkeleton">
<table>
<tr>
<td>
<textarea class="title" tabindex="1">title 1:</textarea>
</td>
<td>
<textarea class="content" tabindex="8"></textarea>
</td>
</tr>
<tr>
<td>
<textarea class="title" tabindex="2">title 2:</textarea>
</td>
<td>
<textarea class="content" tabindex="9"></textarea>
</td>
</tr>
</table>
</div>
<div id="interviewHtmlHere">PUT HERE THE HTML FROM PREV DIV AFTER USER CHANGED IT</div>
When you click on the button - you will have to set all the textarea's text to it's value before getting the .html()
$('button').click(function(){
$('#interviewSummarySkeleton textarea').text(function(){
return this.value;
});
$('#interviewHtmlHere').text($('#interviewSummarySkeleton').html());
});
FIDDLE
You could set the innerHTML of each textarea to the value before your html() call:
http://jsfiddle.net/ZuXwQ/1/
$('button').click(function(){
$('body').find("textarea").each( function() {
this.innerHTML = this.value;
});
console.log($('body').html());
});
Here it is applied to your fiddle: http://jsfiddle.net/RCQmj/1/
Here again, if you want it added as text: http://jsfiddle.net/RCQmj/2/
in either case, I'm assuming interviewHtmlHere is hidden in your actual context?
The .html() method will get the full HTML-code of any element, using jQuery.

Categories

Resources