We Keep Coding

Using Javascript to block element send to next line [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a button element that is hidden at the beginning.
However, I have to display it on certain trigger using JavaScript. But when its triggered it gets pushed to next line. See the Image below :-
What I actually want is :-
Here is my Html code:-
<div id="toolbar">
Launch Access Log Report <a href="#" style="display: none" class="btn btn-secondary" type="button" id="fresh" >Refresh Table Updated</a>
</div>
and my JavaScript code which push it to next line:-
function check(data)
{
if (data === 'no')
{ document.getElementById("fresh").style.display='block';}
}
What is messing it up please explain and how can I fix this issue.

display: block will start on a new line and will take up the full width available. Use display: inline-block or display: inline instead.
Using display: block
<button onclick="show()">Show</button>
<div>
Launch Access Log Report
Refresh Table Updated
</div>
<script>
function show() {
document.getElementById("fresh").style.display = "block";
}
</script>
Using display: inline-block
<button onclick="show()">Show</button>
<div>
Launch Access Log Report
Refresh Table Updated
</div>
<script>
function show() {
document.getElementById("fresh").style.display = "inline-block";
}
</script>

Why can't i use the map function? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
function App() {
const state=useMemoState();
const [btnOn, setBtnOn]=useState(false);
const colorOnClick=(e)=>{
const stateFilter=state.map(item=>{
var a=item.memos.current_memo===item.memos.num
return a;
});
console.log(stateFilter);
setBtnOn({
btnOn:!btnOn,
...stateFilter,
color:e.target.name
});
}
return(
<article
id="bgColor"
className={btnOn? state.filter(item=>item.memos.current_memo===item.memos.num).color : "yellow"
}>
<div id="color" class="texteditor">
<div class="colorpicker">
<button name="black" class="cbtn cbtn-black" onClick={colorOnClick}> <div></div></button>
<button name="white" class="cbtn cbtn-white" onClick={colorOnClick}><div></div></button>
<button name="red" class="cbtn cbtn-red" onClick={colorOnClick}><div></div></button>
<button name="blue" class="cbtn cbtn-blue" onClick={colorOnClick}><div></div></button>
<button name="yellow" class="cbtn cbtn-yellow" onClick={colorOnClick}><div></div></button>
</div>
);
}
Briefly, I am implementing Notepad and an array called state is in another file.
The code is written so that the background color changes when the button is pressed, so the goal is to find out what the pressed button is and put the name of the button in the color part of it. But the map function is not being used. Is there any other way?

There's a lot you need to fix on your code before worrying about the map call:
Your setBtnOn function (the function returned by useState) accepts a single parameter. So your call should be just setBtnOn(!btnOn).
Assuming the state is an array... The filter function returns another array, and your array most likely won't have a color attribute. So when you wrote your filter call, you most like were looking for a find call (which returns a single element).
You are probably missing some kind of code to update the state.
Fix those issues and then we can try to help you.

What does this HTML and JS do? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
<!DOCTYPE html>
<html>
<body>
<h1>Change an HTML element</h1>
<p id="msg">Now you see me.</p>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Gone!'">
Click Me!</button>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Back again!'">
Bring me back!</button>
</body>
</html>
Can someone explain what this does?

When you click on the first button it fires an onclick event attribute. You've told the event to find an element by the ID of 'msg'. Which is the <p> tag above.
It finds it and then replaces the innerHTML value of "Now you see me" with the string 'Gone!'. Pretty much the same thing happens with the second button.
You can learn more about it at the web address below.
http://www.w3schools.com/tags/ev_onclick.asp

Jquery works clearly Firefox, but not in Chrome and Explorer [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i have simple jquery code on my page for show and hide two panels. it works clearly Firefox, but not in Chrome and Explorer.
when i click "Next" button later "Back" button, All the design of the page is distorted .
And i added "show alert" button. When alert is show page is distorted again.
$(function() {
$("#button").click( function()
{
alert('button clicked');
}
);
});
plaese refer problems link: http://bit.ly/1v982qc
<script>
$(function () {
$("#adm2").hide();
$("#adm3").hide();
});
$('#button1').click(function () {
if ($('#year1').prop('checked') == false && $('#year2').prop('checked') == false) { }
else {
$('#adm1').hide(); $('#adm2').show()
if ($('#year1').prop('checked')) {
$("#ruckpanel").show();
}
else {
$("#ruckpanel").hide();
}
}
});
</script>
Thank You!
INITIAL - From start the page look like this:
After clicking "Next" button it looks like this:
After clicking "Back" button it looks like this:

There are probably multiple errors, but this is too big for a comment:
The click handlers in one block look like this:
<span class="pull-left"><div style="width:100px"> <button type="button" class="btn btn-default btn-block" onclick="$('#adm3').hide();$('#adm2').show();"> Back <i class="fa fa-arrow-circle-left fa-lg"> </i></button></div></span>
<span class="pull-right"><div style="width:150px"> <button type="button" class="btn btn-primary btn-block" onclick="$('#adm2').hide();$('#adm3').show();">Next <i class="fa fa-check fa-lg"> </i> </button></div></span>
i.e. the relevant part looks like:
onclick="$('#adm3').hide();$('#adm2').show();"> Back <
onclick="$('#adm2').hide();$('#adm3').show();">Next <
That first one should probably be:
onclick="$('#adm2').hide();$('#adm1').show();"> Back <
as it makes no sense to hide the next page and show the current one!
Suggestion:
I imagine there are many other maintenance problems in this type of coding, so I strongly suggest you unload the gun you have pointed at your own head and stop using onclick= attributes for event handlers! Use jQuery instead for all of them as per your example (you obviously know how to use them that way).
once your code is all in one place error like that will become obvious and you will spot much simpler ways to code the page behavior.

How to get the value of a dropdown using jquery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a dropdown menu and a link in a table. What I want is to get the value of the dropdown menu that is being retrieve in a row.
<td><?php echo form_dropdown('status',array('Fine' => 'Fine', 'Disposable' => 'Disposable'),'','class="status" id="status"'); ?></td>
<td align="center">
<i class="icon-edit icon-large"></i>
<div id="return" style="float: left;">
<!--when this one is clicked I can get the value of the dropdown-->
<i class="icon-backward icon-large"></i>
</div>
How can I get the value of the dropdown When the link with the class of return is clicked? I've tried .closest() function but it returned undefined. Thanks!

Did you tried?
$(document).on('click', 'a.return', function() {
alert($(this).closest('tr').find('#status').val());
});
Note: Using elements with the same id is a bad practice and can give you problems along the road. Please consider to remove #status id from the elements and use a class when selecting the element.
Try this instead:
$(document).on('click', 'a.return', function() {
alert($(this).closest('tr').find('select.status').val());
});

Use :
$(".return").click(function({
selectedValue = $('select[name="status"]').val(); //using name tag
selectedValue = $('.status').val(); // using Class
selectedValue = $('#status').val(); // using Id
console.log(selectedValue);
}));