Problem:
I am trying to dynamically creat alerts and prompts using JavaScript functions, but struggling to apply CSS styles to these elements. The default browser styles are being applied, and I want to customize the appearance using CSS.
What I have tried:
here is the code I had used to try to apply css to dynamically created alert and prompt.
function showAlert(message) {
alert(message);
// Attempted to add styles directly
document.getElementsByClassName('alert').style.color = 'red';
}
function showPrompt(question, defaultValue) {
prompt(question, defaultValue);
// Similarly tried to add styles
document.getElementsByClassName('prompt').style.backgroundColor = 'lightblue';
}
However, these attempts have not successfully applied the desired CSS styles to the dynamically created alerts and prompts.
I am seeking guidance on the correct approach to apply CSS styles to these elements, and whether a different method of dynamic creation is needed to ensure styles are applied correctly.