By default scripts are stripped out when in visual view.
So there are a couple of options:
- Never use visual mode again (let's be honest, that's not going to happen ;) )
- Create a shortcode that will do the alert for you.
In your functions.php file add the following
/**
* [alert_link url="https://example.com" message="This is the message" text="This is the link to click"]
*
* @param $atts
* @param null $content
*
* @return string
*/
function my_alert_shortcode( $atts, $content = null ) {
// Set up your defaults and read from the shortcode parameters you enter in the page.
$atts = shortcode_atts(
array(
$url = '#', // This is the default URL for your shortcode should you leave that parameter blank
$message = 'This is the message', // This would be the default message should you leave that parameter blank
$text = 'This is the link to click', // This would be the default text that is made an anchor
), $atts, 'alert_link' );
// Now format your output to include the parameters from above.
$output = '<a class="my-alert-link" href="' . $url . '" onClick="alert(\'' . $message . '\')">' . $text . '</a>';
return $output; // Return
}
add_shortcode( 'alert_link', 'my_alert_shortcode' ); / This registers your shortcode for use.
Once in place you'd just enter the shortcode like this and replace the default values as required:
[alert_link url="https://example.com" message="This is the message" text="This is the link to click"]
Shortcodes are a super helpful way to do things like add script or extra functionality without having to program it into the editor (which is inherently unsafe, which is why scripts get stripped).
Check out the WordPress shortcode documentation here: https://codex.wordpress.org/Shortcode_API
A quick note too on the HTML you're using. While valid, FONT tags and spans used to set font-size, family, etc. are pretty darn old and should be replaced with CSS if possible.
Checkout HTML 5 Web Developer guide for semantics etc. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
