JavaScript代码中的HTML按钮

Question

I am working in a software which has its interface written in JavaScript I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/

The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?

Answer 1

I am not a javascript person, but if you are using JQuery, it should go something like this

$(document).ready(function() {
   document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});

'divId' would be id of Div tag (place holder) covering input tag.

Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,

Answer 2

Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:

var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);

I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.

Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden .