We Keep Coding

javascript on onclick="return func();" stop working after first element by id

<button onclick="return validateEdit();" class="btn btn-primary submit-btn">Submit</button>
function validateEdit() {
var name = document.getElementById("sftName").value;
aler("name")
var startTime = document.getElementById("startTimeEdit").value;
aler("start time")
}
The function execute first alert and don't show second aler.I am using also:
$('#edit_shift').on('show.bs.modal', function (event) {
var anchor = $(event.relatedTarget) // Button that triggered the modal
var id = anchor.data('whatever')
var from = anchor.data('fromtime')
var modal = $(this)
$("#sftName").attr("value", name);
$("#startTimeEdit").attr("value", from);
In the another form is working fine.
Edit: start time with value and without value is not working in both cases.
I am full zero at javascript.

There are some typo error. Make sure its alert in your code and not aler. Also html content you posted having only button, whereas you are trying to fetch two elements with id sftName and startTimeEdit, make sure those elements are there in your code.
For better understanding can you recreate above issue on codepen.

TinyMCE disappears after save Widget in Wordpress

first of all, sorry for my bad english, I'm from Germany.
I just created my first widget. It's a widget that creates automatically a grid out of a list.
I can add a new list-item and every form field will be duplicated.
But after 3 days of searching the internet without a result I decided to ask by myself...
So here is my first problem, when I add a new item, the TinyMCE in the new item is disabled, I can't click on the buttons or type text into it.
There are no errors in the console log.
My second problem is when I save the widget, all TinyMCE-Editors disappear and leave the textareas, with the html code.
Here also: no errors... but I've seen, that the TinyMCE isn't loading after save. There is no iframe, nothing but the textarea.
After reload the widget page, everything is fine again for both problems.
So I have to add new items and save the page and then reload it to edit and edit the content, but that don't solve the problem.
I think I have to reinitialize the TinyMCE but I don't know how.
I had problems with adding the wordpress editor to my widget so I integrated the jQuery TinyMCE from the website.
Here is the code snippet of my add-function:
$("body").on('click.sgw','.sgw-add',function() {
var sgw = $(this).parent().parent();
var num = sgw.find('.simple-grid .list-item').length + 1;
sgw.find('.amount').val(num);
var item = sgw.find('.simple-grid .list-item:last-child').clone();
var item_id = item.attr('id');
item.attr('id',increment_last_num(item_id));
$('.toggled-off',item).removeClass('toggled-off');
$('.number',item).html(num);
$('.item-title',item).html('');
$('.custom_media_image',item).attr('src','');
$('textarea',item).val('');
$('img.custom_media_image',item).each(function() {
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
});
$('textarea',item).each(function() {
var id_iframe = $(this).attr('id');
tinymce.EditorManager.execCommand('mceRemoveEditor',true, id_iframe);
tinymce.EditorManager.execCommand('mceAddEditor',true, id_iframe);
});
$('label',item).each(function() {
var for_val = $(this).attr('for');
$(this).attr('for',increment_last_num(for_val));
});
$('input',item).each(function() {
var id_val = $(this).attr('id');
var name_val = $(this).attr('name');
$(this).attr('id',increment_last_num(id_val));
$(this).attr('name',increment_last_num(name_val));
if($(':checked',this)){
$(this).removeAttr('checked');
}
if($(this).hasClass('custom_media_button') || $(this).hasClass('custom_media_url')){
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
}
if($(this).hasClass('button-primary')){
var number_val = $(this).attr('number');
$(this).attr('number',increment_last_num(number_val));
}
$(this).not('#custom_media_button').val('');
});
sgw.find('.simple-grid').append(item);
sgw.find('.order').val(sgw.find('.simple-grid').sortable('toArray'));
});
I hope this is understandable and someone can help me.
You can download the zip here: https://www.dropbox.com/s/22b8q29v94n7mdj/simple-grid-widget.zip?dl=0

Are you trying to run several editors at once? There's a limitation with Wordpress and TinyMCE where you can basically one editor at a time. I've gotten around that but it was very difficult.
To load a new editor you may have to remove the old one:
tinymce.remove();

Button.onclick automatically triggers, then will not trigger again

I have a script, which I'm using to try and display only one section of a webpage at a time.
function showMe(id){ clearPage(); changeDisplay(id, "block"); console.log(id)}
Currently, I'm using buttons to change which section is displayed.
var aBtn = document.getElementById("a-btn");
var otherBtn = document.getElementById("other-btn");
aBtn.onclick=showMe("a-btn-section-id");
otherBtn.onclick=showMe("other-btn-section-id");
However, when I load the page, the following happens:
I see the function attached to each button activate once in sequence in the console.
The page refuses to respond to further button inputs.
Testing with the console shows that showMe() and the functions it calls still all work properly. I'm sure I'm making a very basic, beginner mistake (which, hopefully, is why I can't find this problem when I Google/search StackOverflow/read event handling docs), but I'm at a loss for what that mistake is. Why would my script assume my buttons are clicked on load, and why won't it let me click them again?

You're calling the function an assign the value to onclick property instead of attach the function, try defining your onclick property as:
aBtn.onclick=function(){showMe("a-btn-section-id");};
otherBtn.onclick=function(){showMe("other-btn-section-id");};
Try the follow jsfiddle:
function showMe(id){ // some stuff..
console.log(id)
}
var aBtn = document.getElementById("a-btn");
var otherBtn = document.getElementById("other-btn");
aBtn.onclick=function(){showMe("a-btn-section-id");};
otherBtn.onclick=function(){showMe("other-btn-section-id");};
<input type="button" value="a-btn" id="a-btn"/>
<input type="button" value="other-btn" id="other-btn"/>
Hope this helps,

How can I use javascript to add and remove an element over and over again?

First posting. I am attempting to use buttons defined in HTML to call a function that creates buttons via JavaScript while the other button removes the buttons created.
HTML:
<div id="thisdiv">
<input type="button" onclick="makeButtons()" value="Add" />
<input type="button" onclick="removeButtons()" value="Remove" />
</div>
Javascript:
function makeButtons()
{
var buttonOne=document.createElement("BUTTON");
var buttonTwo=document.createElement("BUTTON");
buttonOne.setAttribute("id", "yesdombutton"); //adds id to button
buttonTwo.setAttribute("id", "nodombutton"); //adds id to button
document.getElementById("thisdiv").appendChild(buttonOne); //appends buttons
document.getElementById("thisdiv").appendChild(buttonTwo);
}
function removeButtons()
{
var div = document.getElementById("thisdiv");
div.removeChild(yesdombutton); //this works only once in firefox but >
div.removeChild(nodombutton); //works over and over in IE
}
As the comment sin the remove() function state, the code as is only works once in Firefox, but works fine in IE10. And by work, I mean that I can click the Yes and No buttons in the HTML section, back and forth, and the buttons created by the JavaScript appear and disappear as they should.
I would like the same to occur in Firefox but I have been unable to find an answer.

And a friend of mine mentioned that I have a scope issue... The following code makes the site work like how I want it to.
Javascript:
function removeButtons()
{
var div = document.getElementById("albumown");
var destroyMe = document.getElementById("yesdombutton"); //This makes it so that
var destroyMeToo = document.getElementById("nodombutton"); //the buttons I want to
//remove are referenced
div.removeChild(destroyMe); //correctly
div.removeChild(destroyMeToo);
}
Thank you to those that asked about this! I have been wracking my head for a week trying different things. But, all is well now.

.removeClass not functioning within .replaceWith

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.

The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});

NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API