HTML Code functions in Editor, but not in Preview or Live Site

  • Unknown's avatar
    osagiejes · Member ·

    Hey,

    I’ve got a time converter code that I’ve tested and know works in a base .html file and functions when I embed the custom HTML in WordPress’s Editor, but doesn’t function at all once I’m trying it in a page preview or live page on my wordpress site. Does anyone know what’s wrong here?

    The code:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Converter</title>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    .container {
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    h2 {
        text-align: center;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input[type="text"], select {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    button {
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    button:hover {
        background-color: #45a049;
    }
    .result {
        margin-top: 20px;
        text-align: center;
        font-weight: bold;
    }
</style>
</head>
<body>

<div class="container">
    <h2>Time Converter</h2>
    <label for="timeInput">Enter Time:</label>
    <input type="text" id="timeInput" placeholder="HH:MM or HHMM">
    <select id="meridian">
        <option value="AM">AM</option>
        <option value="PM">PM</option>
    </select>

    <button onclick="convertTime()">Convert</button>

    <div class="result" id="convertedTime"></div>

    <button onclick="toggleConversionType()">Swap Conversion</button>
</div>

<script>
var isStandardToMilitary = true;

function toggleConversionType() {
    isStandardToMilitary = !isStandardToMilitary;
    var button = document.querySelector('button');
    var timeInput = document.getElementById("timeInput");
    if (isStandardToMilitary) {
        button.textContent = "Convert to Military Time";
        timeInput.placeholder = "HH:MM or HHMM";
        document.getElementById("meridian").style.display = "block"; // Show AM/PM dropdown
    } else {
        button.textContent = "Convert to Standard Time";
        timeInput.placeholder = "HHMM";
        document.getElementById("meridian").style.display = "none"; // Hide AM/PM dropdown
    }
    timeInput.value = ""; // Reset input value
    document.getElementById("convertedTime").innerText = "";
}

function convertTime() {
    var timeInput = document.getElementById("timeInput").value;

    if (isStandardToMilitary) {
        var time;
        if (timeInput.includes(":")) {
            time = timeInput.split(":");
        } else {
            time = [timeInput.slice(0, -2), timeInput.slice(-2)]; // Splitting HHMM
        }

        var hour = parseInt(time[0]);
        var minute = parseInt(time[1]);
        var meridian = document.getElementById("meridian").value;

        if (meridian.toUpperCase() === "PM" && hour < 12) {
            hour += 12;
        } else if (meridian.toUpperCase() === "AM" && hour === 12) {
            hour = 0;
        }

        var militaryHour = ("0" + hour).slice(-2);
        var militaryMinute = ("0" + minute).slice(-2);

        var militaryTime = militaryHour + ":" + militaryMinute;
        document.getElementById("convertedTime").innerText = "Military Time: " + militaryTime;
    } else {
        var hour = parseInt(timeInput.substring(0, 2));
        var minute = parseInt(timeInput.substring(2, 4));

        var standardMeridian = (hour >= 12) ? "PM" : "AM";
        if (hour > 12) {
            hour -= 12;
        } else if (hour === 0) {
            hour = 12;
        }

        var standardTime = hour + ":" + ("0" + minute).slice(-2) + " " + standardMeridian;
        document.getElementById("convertedTime").innerText = "Standard Time: " + standardTime;
    }
}
</script>

</body>
</html>
  • Unknown's avatar
    staartmees · Member ·

    We can only help with sites running on the wordpress.com platform. The code you are trying to use isn’t allowed on the wordpress.com platform unless you upgrade to the Creator Plan.

  • The topic ‘HTML Code functions in Editor, but not in Preview or Live Site’ is closed to new replies.